上一篇: html – 是否可以用CSS制作圆角三... 下一篇:电子邮件 – HTML电子邮件是什么...

html – 背景图像上的CSS3过渡

HTML 发布时间：2022-04-14 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html – 背景图像上的CSS3过渡，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我想做一个 CSS3变换：rotate(360deg);在过渡1s;
在背景图像而不是单独的图像(元素)..
这可能吗？我已经搜索了谷歌,但没有成功！
我想要实现的是：

#footerLogo { 
  BACkground: url('ster.png'),-moz-transition: -moz-transform 1s,transition: transform 1s,-o-transition: -o-transform 1s,-webkit-transition: -webkit-transform 1s;
  BACkground-position: #outlinedtotHeleft;
}
#footerLogo:hover {
  BACkground: transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

我希望这是可能的！我知道JS(jQuery)很容易实现：

$('#something').hover(function(){morecodeherE});

…但我想知道是否有可能只有CSS(3)

HTML：

<div id="footerLogo">
  <img src="carenza.png"/>
</div>

解决方法

当然可以,尝试这样的事情：

HTML

<div id="planet">
</div>

CSS

#planet { 
    width:200px;
    height:200px;
    BACkground: transparent url(http://cdn3.iconfinder.com/data/icons/nx11/Internet%20-%20Real.png) no-repeat center center;
}

#planet {
  -webkit-animation-name: rotate;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -moz-animation-name: rotate;
  -moz-animation-duration:2s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
}

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {  -webkit-transform:rotate(360deg);}
}

@-moz-keyframes rotate {
  from {-moz-transform:rotate(0deg);}
  to {  -moz-transform:rotate(360deg);}
}