本篇文章介绍了使用 @keyframes 规则和 animation 属性让 div 一直旋转的方法, 感兴趣的同学可以看看.
1, 首先创建一个 div 元素, 并给它一个 id 值 xuanzhuan, 使用内联样式给 div 添加一些样式.
<div id="xuanzhun" style="width: 30px; height: 30px; background-color: aquamarine;">
(推荐学习: CSS 视频教程 https://www.html.cn/css/ )
2, 然后使用 @keyframes 规则创建一个动画 rotate
- @-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(359deg)}
- }
- @-o-keyframes rotate{
- from{-o-transform: rotate(0deg)}
- to{-o-transform: rotate(359deg)}
- }
- @keyframes rotate{
- from{transform: rotate(0deg)}
- to{transform: rotate(359deg)}
- }
3, 最后, 给 div 指定 animation 即可.
- #xuanzhun{
- -webkit-transition-property: -webkit-transform;
- -webkit-transition-duration: 1s;
- -moz-transition-property: -moz-transform;
- -moz-transition-duration: 1s;
- -webkit-animation: rotate 3s linear infinite;
- -moz-animation: rotate 3s linear infinite;
- -o-animation: rotate 3s linear infinite;
- animation: rotate 3s linear infinite;
- }
效果:
来源: http://www.css88.com/qa/css3/15744.html