-
在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% 动画的结束时间。
04:32
-
-
-
-
-
-
-
-
-
font-size:1.5vw;
position: fixed;
top: 3vh;
right: 4vw;
单位设置为vh\vw,分别是高和宽,会随着屏幕大小适配。
-
-
-
过度效果主要是利用了transition和transform里的translate,两个页面之间的切换并没有用帧动画,而是直接利用了添加class (transform.translate -100%)以及top100%相互抵消
08:45
-
<!--此处有图片-->htto-equiv=X-UA-Compatible content="IE=edge,chrome=1"
视口htto-equiv
format-detection : 禁止将你的数字转化为拨号连接
-
-
第二页,top: 0, 5.5秒上移top: -100%;
第三页 top: 100%; 0, 5.5秒上移top: -100%;
<!--此处有图片-->
<!--此处有图片-->
<!--此处有图片-->
-
-
修改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
<!--此处有图片-->
-
-
举报