类似百度音乐唱片播放时CD图片不停旋转的实现-优快云博客

本文将介绍如何在网页上实现类似百度音乐唱片播放时CD图片不停旋转的动态效果，包括HTML代码、CSS3动画原理及应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类似百度音乐唱片播放时CD图片不停旋转的实现

效果图

 1 html代码
 2 <imgsrc="img/logo.png"class="img-responsive"style="float: left;"/>
 3 css3代码
 4 # img{
 5 -webkit-transition:-webkit-transform 5s;
 6 -webkit-transform: rotate(0deg);
 7 -moz-transform: rotate(0deg); 8 -webkit-transform-origin: center; 9 -moz-transform-origin: bottom center; 10 -webkit-animation: css_a 5s; 11 animation: css_a 5s; 12 -moz-animation: css_a 5s; 13 -webkit-animation-duration:10s; 14 -webkit-animation-timing-function: linear; 15 /* 16 * 不停的动 17 */ 18 -webkit-animation-iteration-count: infinite; 19 /* Safari and Chrome */ 20 -moz-animation-timing-function: linear; 21 /* 22 * 不停的动 23 */ 24 -moz-animation-iteration-count: infinite; 25 } 26 @-webkit-keyframes css_a {from { /*chrome */ 27 28 -webkit-transform: rotate(0deg); 29 -ms-transform: rotate(0deg); 30 /* IE 9 */ 31 -moz-transform: rotate(0deg); 32 /* Firefox */ 33 } 34 35 to { 36 37 -webkit-transform: rotate(360deg); 38 -ms-transform: rotate(360deg); 39 /* IE 9 */ 40 -moz-transform: rotate(360deg); 41 /* Firefox */ 42 } 43 44 } 45 @-moz-keyframes css_a {from { /*火狐 */ 46 -webkit-transform: rotate(0deg); 47 -ms-transform: rotate(0deg); 48 /* IE 9 */ 49 -moz-transform: rotate(0deg); 50 /* Firefox */ 51 } 52 53 to { 54 -webkit-transform: rotate(360deg); 55 -ms-transform: rotate(360deg); 56 /* IE 9 */ 57 -moz-transform: rotate(360deg); 58 /* Firefox */ 59 } 60 }

我的空间

转载于:https://www.cnblogs.com/wenqd/p/4974018.html