Html 仅设置背景动画
我在一个叫做logo的类中有一个图像。这个container.logo有一个我想要设置动画的图像背景,所以它可以无限旋转360度 当我运行代码时,它会为两个图像设置动画。我只想它动画的css背景属性。这可能吗 这是到目前为止我的cssHtml 仅设置背景动画,html,css,animation,css-animations,Html,Css,Animation,Css Animations,我在一个叫做logo的类中有一个图像。这个container.logo有一个我想要设置动画的图像背景,所以它可以无限旋转360度 当我运行代码时,它会为两个图像设置动画。我只想它动画的css背景属性。这可能吗 这是到目前为止我的css a.navbar-brand { background: url('http://i.imgur.com/3PL0u4Q.jpg'); background-repeat: no-repeat; height: 180px; w
a.navbar-brand {
background: url('http://i.imgur.com/3PL0u4Q.jpg');
background-repeat: no-repeat;
height: 180px;
width: 180px;
-webkit-animation: spin 16s linear infinite;
-moz-animation:spin 16s linear infinite;
animation:spin 16s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
还有html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://i.imgur.com/3PL0u4Q.jpg" alt="logo" class="logo"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="navbar-attatch"></div>
</nav>
切换导航
我知道css转换有一个“全部”或“css属性”,但我不知道如何插入我的示例。我尝试了多种方法,它完全破坏了动画 你不能只旋转背景。可以选择哪些属性设置动画,但不能说只有背景才会对其应用变换 在您的情况下,可以旋转图像而不是链接
a.navbar-brand{
背景:url('http://i.imgur.com/3PL0u4Q.jpg');
背景重复:无重复;
高度:180像素;
宽度:180px;
}
a、 navbar品牌img{
动画:自旋16秒线性无限;
}
@-moz关键帧旋转{100%{-moz变换:旋转(360度);}
@-webkit关键帧旋转{100%{-webkit变换:旋转(360度);}
@关键帧旋转{100%{-webkit变换:旋转(360度);变换:旋转(360度);}}
不能只旋转背景。您可以选择哪些属性设置动画,但不能说只有背景将对其应用变换。此外,问题应排除不相关的代码。对于您的问题,您可能需要两行或三行HTML,永远不要在这里转储代码,始终只使用相关部分创建缩减创建两个单独的元素并仅为其中一个设置动画OK谢谢,或者我可以设置:before并为其提供不同的背景吗?尝试一下。。。如果没有,问一个新问题。