使用CSS和Javascript的无限旋转动画
Infinite rotation animation using CSS and Javascript
我浏览了一些单页网站示例,发现这个:http://alwayscreative.net/。我对背景中无限旋转的光盘感到非常惊讶。我看过一些例子,但没有一个是这样工作的。谁能告诉我这是如何实施的。谢谢。
无休止的旋转 - CSS3 动画属性和关键帧:
@keyframes rotate360 {
to { transform: rotate(360deg); }
}
img { animation: 2s rotate360 infinite linear; }
<img src="https://i.stack.imgur.com/qCWYU.jpg?s=64&g=1" />
或者您可以使用以下学位代替学位:rotate(1turn)
这个例子很好地实现了无限旋转:
div{
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 80px/80px;;
border:solid 21px #f00;
width:100px;
height:100px;
-webkit-animation: rotation 2s linear infinite;
-moz-animation: rotation 2s linear infinite;
-ms-animation: rotation 2s linear infinite;
}
@-webkit-keyframes rotation {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotation {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes rotation {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); }
}
您可以在此处进行测试:http://jsfiddle.net/HS68a/2/
请检查此行。 我们可以使用 CSS3 来旋转图像。 我将在铬上测试工作正常http://jsfiddle.net/sUHKh/
以下是在您的示例中实现它的方式:
@-webkit-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
@-moz-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
@-o-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
.vector1{-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite}
但我没有看到任何兴趣(我敢说这似乎有点奇怪......在将浏览器前缀转换放在其他浏览器特定的关键帧中。
它也缺少通用关键帧和IE10支持,所以我就是这样实现它的:
@-webkit-keyframes rotation1{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation1{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-o-keyframes rotation1{
from{-o-transform:rotate(0deg);}
to{-o-transform:rotate(360deg);}
}
@keyframes rotation1{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
.vector1{-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite}
我刚刚在Chrome中做了一个"检查元素"。这是 CSS。
.vector1 {
-moz-animation: rotation1 30s linear infinite;
-o-animation: rotation1 30s linear infinite;
-webkit-animation: rotation1 30s linear infinite;
animation: rotation1 30s linear infinite;
}
相关文章:
- 知道为什么我的旋转木马不会自动更改图片吗
- 结合jQuery和jetpack无限滚动
- ng应用程序使脚本无限运行
- 顺时针旋转Svg元件
- 将鼠标旋转限制为特定的度数
- 旋转后拖动对象
- 禁用旋转木马中的下一个按钮和上一个按钮
- 手动创建旋转活动指示器
- 如何在容器中定位旋转的图像
- JavaScript 素数搜索无限递归
- jquery/ajax无限滚动事件
- 在轴上旋转SVG图像
- 使用CSS和Javascript的无限旋转动画
- 为所有主流浏览器创建 css3 无限旋转
- 无限旋转木马与下一个和上一个显示
- 使用snap.svg进行无限旋转
- 如何使我的无限图像旋转器能够应用于许多旋转框
- Jquery图像旋转木马使它成为圆形旋转木马,所以它是“无限的”
- 点击图像无限旋转,再次点击停止
- 离子2禁用无限卷轴旋转器