html5贺卡教学视频,HTML5+CSS3实现春节贺卡

在html页面中加入class="play"; 利用两个图像的z-index关系控制是否遮盖

代码如下 (省略-o -ms内核)

#music > img.play {

/* 兼容 */ -webkit-animation: music_disc 4s linear infinite;

animation: music_disc 4s linear infinite;

/*设置动画样式：动画名称  周期(秒)匀速 重复进行*/}

@keyframes music_disc/**设置动画时间/ {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg)/*旋转多少度*/;

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-webkit-keyframes music_disc {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。