如何做一个webkit的CSS无尽的旋转animation。
我想通过CSS旋转我的加载图标。
我有一个图标和下面的代码：
<style> #test { width: 32px; height: 32px; background: url('refresh.png'); } .rotating { -webkit-transform: rotate(360deg); -webkit-transition-duration: 1s; -webkit-transition-delay: now; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; } </style> <div id='test' class='rotating'></div> 但它不起作用。 如何使用CSS旋转图标？
@-webkit-keyframes rotating /* Safari and Chrome */ { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 2s linear infinite; -moz-animation: rotating 2s linear infinite; -ms-animation: rotating 2s linear infinite; -o-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; }
<div class="rotating" style="width: 100px; height: 100px; line-height: 100px; text-align: center;" >Rotate</div>
工作很好：
#test { width: 11px; height: 14px; background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7'); } @-webkit-keyframes rotating { from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 2s linear infinite; }
<div id='test' class='rotating'></div>
/* ENDLESS ROTATE */ .rotate{ -webkit-animation: rotate 1.5s linear infinite; animation: rotate 1.5s linear infinite; } @-webkit-keyframes rotate{ to{-webkit-transform: rotate(360deg); } } @keyframes rotate{ to{ transform: rotate(360deg); } } /* SPINNER JUST FOR DEMO */ .spinner{ display:inline-block; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset -2px 0 0 2px #0bf; }
<span class="spinner rotate"></span>
<style> div { height:200px; width:200px; -webkit-animation: spin 2s infinite linear; } @-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} } </style> </head> <body> <div><img src="1.png" height="200px" width="200px"/></div> </body>
- 使TBODY在Webkit浏览器中可滚动
- -webkit-overflow-scrolling：touch; 在苹果的iOS8中rest
- $ http不会在请求中发送Cookie
- 在inputtypes=“数字”上禁用webkit的旋转button？
- 我怎样才能在Android上debuggingJavaScript？
- 我的iPhone Objective-C代码如何在UIWebView中获得Javascript错误的通知？
- 常用的JavaScript实现是否使用string实习？
- 什么是正确的“-moz-appearance”值来隐藏<select>元素的下拉箭头
- Gmail和Google Chrome 12+如何在剪贴板function中使用粘贴图片？
