在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% 动画的结束时间。

背景jpg格式  其它图片png24

本地服务器测试环境：WampServer

这个要好好学习学习

字体大小VW单位 

切图—重构—前端—优化

<!--此处有图片-->

font-size:1.5vw;

position: fixed;

top: 3vh;

right: 4vw;

单位设置为vh\vw,分别是高和宽，会随着屏幕大小适配。

font-size单位设为vh\vw,字体大小就会随屏幕大小适配，整个屏幕宽度为100vw,高度为100hw

wrampsever 是网站开发集成环境，相当于在本地搭建了一个服务器，然后把写好的代码放在相应的文件夹里，在浏览器里运行就可以了

<!--此处有图片-->htto-equiv=X-UA-Compatible    content="IE=edge,chrome=1"

视口htto-equiv

format-detection :  禁止将你的数字转化为拨号连接 

page2_loading

<!--此处有图片-->

<!--此处有图片-->

第二页，top: 0, 5.5秒上移top: -100%;

第三页 top: 100%; 0, 5.5秒上移top: -100%;

<!--此处有图片-->

<!--此处有图片-->

<!--此处有图片-->

<!--此处有图片-->click有300ms延长，改用touchStart

<!--此处有图片-->

修改music 结构

<!--此处有图片-->

<!--此处有图片-->

<!--此处有图片-->javascript 标签 differ属性

animationPlayState =  running/paused; 浏览器兼容问题

碟片旋转

<!--此处有图片-->红灯笼闪烁

内圈转 delay 1s; 1080deg

<!--此处有图片-->第二个圈 delay 2s; 720deg

<!--此处有图片-->第三个 delay 2s; 360deg

<!--此处有图片-->福旋转

<!--此处有图片-->

title

<!--此处有图片-->

logo

<!--此处有图片-->上联<!--此处有图片-->

下联<!--此处有图片-->

福

<!--此处有图片-->

page static => absolute

1, 2, 3页通过display显示

<!--此处有图片-->

<!--此处有图片-->

3个圈

<!--此处有图片-->

<!--此处有图片-->

<!--此处有图片-->

2016

<!--此处有图片-->

灯笼

<!--此处有图片-->灯笼红色阴影

<!--此处有图片-->小m

<!--此处有图片-->文字

<!--此处有图片-->

添加背景-

<!--此处有图片-->

<!--此处有图片-->