标签：
从开始的css层叠样式 到现在的css3的模块发展 越来越多的特技效果层出不穷的展示在我们的视野中 冲击我们的感官
满足我们的求知欲 下面的效果不难
相信大家都已经明白了 通过变形(transform)实现 动画的实现除了这个 还有：转换(transition)和动画(animation)
·旋转实现
1 @-webkit-keyframes rotate{ 2 from{-webkit-transform: rotate(0deg)} 3 to{-webkit-transform: rotate(360deg)} 4 } 5 @-moz-keyframes rotate{ 6 from{-moz-transform: rotate(0deg)} 7 to{-moz-transform: rotate(359deg)} 8 } 9 @-o-keyframes rotate{ 10 from{-o-transform: rotate(0deg)} 11 to{-o-transform: rotate(359deg)} 12 } 13 @keyframes rotate{ 14 from{transform: rotate(0deg)} 15 to{transform: rotate(359deg)} 16 }
在css样式animation调用
接着就需要定位到按钮
css写的有点乱 没有用less之类的框架实现，
1 .mgr_cir{ 2 width: 121px; 3 height: 297px; 4 background: white; 5 padding-right: 22px; 6 padding-left: 24px; 7 border:1px solid #eee; 8 position:relative; 9 } 10 .mgr_cir .play-btn{ 11 display: block; 12 width: 34px; 13 height: 42px; 14 z-index:999; 15 position: absolute; 16 margin-top: 39px; 17 margin-left: 45px; 18 border-radius: 66% 86%; 19 } 20 .cdpic{ 21 margin: 2px; 22 -webkit-animation: rotate 12s linear infinite; 23 -moz-animation: rotate 12s linear infinite; 24 -o-animation: rotate 12s linear infinite; 25 animation: rotate 12s linear infinite; 26 -khtml-border-radius: 50%; 27 -ms-border-radius: 50%; 28 -o-border-radius: 50%; 29 -moz-border-radius: 50%; 30 -webkit-border-radius: 50%; 31 border-radius: 50%; 32 } 33 .pay{ 34 background: url(‘img/but.gif‘) no-repeat; 35 background-position: -42px -4px; 36 } 37 .pause{ 38 background: url(‘img/but.gif‘) no-repeat; 39 background-position:-1px -4px; 40 } 41 .pay:hover{ 42 background: url(‘img/but.gif‘) no-repeat; 43 background-position: -42px -102px; 44 } 45 .pause:hover{ 46 background: url(‘img/but.gif‘) no-repeat; 47 background-position: -1px -102px; 48 }
这只是css3中比较单一的动画 复杂的还可以通过html5的canvas实现
仅供参考 下载这里
标签：
原文地址：http://www.cnblogs.com/Vipming/p/4665320.html
