知行合一，止于至善
千里之行，始于足下；合抱之木，生于毫末；九层之台，起于累土纯CSS实现旋转的唱片
5月 1, 2015 |
Nix.Huang
一直对百度音乐的那个旋转的唱片和感兴趣，通过firebug查看了它的实现，是通过css动画实现的，但是像我这样的CSS动画基础为0的人来说，要完全弄明白还是有难度，先将其相关的CSS代码抠出来，放在这里以备学习，盗用了百度的资源，哈哈，希望百度不要说我侵权啦！！！哈哈！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<style type="text/css"> #s_fm_pic_img { width:119px; height:119px; background: url("./fmsprite_35b05295.png") no-repeat -279px 0; border-radius: 50%; animation-play-state: running; } .img{-moz-animation:rotate 10s linear infinite;-moz-animation-play-state:paused;-ms-animation:rotate 10s linear infinite;-ms-animation-play-state:paused;animation:rotate 10s linear infinite;animation-play-state:paused;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;width:119px;height:119px;width:121px \9;height:121px \9;*width:121px;*height:121px;display:inline-block;background:url('./fmsprite_35b05295.png') no-repeat -280px 0;_background:url('./fmsprite_le_5d5804ad.png') no-repeat -280px 0;background:url('./fmsprite_35b05295.png') no-repeat -279px 0 \0;*background:url('./fmsprite_35b05295.png') no-repeat -279px 0} .fm-disk-animation{-webkit-animation:rotate 10s linear infinite;-webkit-animation-play-state:paused} @-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}} @-moz-keyframes rotate{from{-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}to{-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}} @-ms-keyframes rotate{from{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}} .play{background:url('./fmsprite_35b05295.png') no-repeat -64px 0px;_background-position:-42px -4px} .pause{background-position:-23px 0;_background-position:-1px -4px} .play:hover{background-position:-64px -40px;_background-position:-42px -102px} .pause:hover{background-position:-23px -40px;_background-position:-1px -102px} #play_pause { height: 36px; width: 34px; display: block; left: 41px; position: absolute; top: 41px; } </style> |
|
1 2 3 4 5 6 7 |
<body> <div id="rotate_controler" style="position: relative;"> <div id='s_fm_pic_img' class="img fm-disk-animation"> </div> <a id="play_pause" hidefocus="true" class="play-btn play" id="play-btn" onclick="return false" title="暂停" href="#"></a> </div> </body> |
Posted in: Uncategorized
Comments are closed.