1发现差别
使用过多了DIV。
有许多没必要的重复代码。
有许多高度（height）没必要设置大少。
自适应使用的方法。
切图切的不好，PS的使用有待加强。
下载按钮不同。
没有完成动画效果。
2.学到
要灵活使用背景定位：background-position。
背景大小：background-size。 Contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
利用好padding 设置背景色。
用@media screen and实现页面自适应。
注意继承性，减少重复代码。
box-shadow设置边框阴影
动画与元素绑定：
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。infinite 无限次播放
animation-direction 规定是否应该轮流反向播放动画。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了
Transform属性
translate(x,y) 定义 2D 转换。translate3d(x,y,z) 定义 3D 转换。 translateX(x) 定义转换，只是用 X 轴的值。 translateY(y) 定义转换，只是用 Y 轴的值。 translateZ(z) 定义 3D 转换，只是用 Z 轴的值。 scale(x,y) 定义 2D 缩放转换。 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 通过设置 X 轴的值来定义缩放转换。 scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿着 X 轴的 3D 旋转。 rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 perspective(n) 为 3D 转换元素定义透视视图。
使用动画效果
1、设置一了类名 music-play 绑定musicPlay 设置持续时间2秒。
.music-play {
-webkit-animation: musicPlay infinite 2s linear;
animation: musicPlay infinite 2s linear;
}。
2、设置musicPlay的动画。
@-webkit-keyframes musicPlay {
0%{opacity: 0; -webkit-transform: scale(0.7) rotate(30deg) translate(0);}
15%{ -webkit-transform: scale(0.8) rotate(0deg) translate(-0.2rem,-0.2rem);}
30%{ opacity: 0.8; -webkit-transform: scale(0.9) rotate(-30deg) translate(-0.1rem, -0.4rem);}
50%{ -webkit-transform: rotate(0deg) translate(-0.4rem, -0.6rem);}
75%{ opacity: 0.2; -webkit-transform: rotate(30deg) translate(-0.9rem, -0.7rem);}
100%{ opacity: 0; -webkit-transform: rotate(0deg) translate(-0.6rem, -1.1rem);}
}
@keyframes musicPlay {
0%{opacity: 0; transform: scale(0.7) rotate(30deg) translate(0);}
15%{ transform: scale(0.8) rotate(0deg) translate(-0.2rem,-0.2rem);}
30%{ opacity: 0.8; transform: scale(0.9) rotate(-30deg) translate(-0.1rem, -0.4rem);}
50%{ transform: rotate(0deg) translate(-0.4rem, -0.6rem);}
75%{ opacity: 0.2; transform: rotate(30deg) translate(-0.9rem, -0.7rem);}
100%{ opacity: 0; transform: rotate(0deg) translate(-0.6rem, -1.1rem);}
}
3.调用动画效果。
<div calss=“music-play”><div>;
那么div就有music-play所以设置的动画效果了。
总结
可以看到自己还有很多的不足，对于代码的不属性，PS软件使用的不熟悉。使工作效率很低。
给各个部分取一个好名字一个重点。
减少重复代码减少代码量。
动画效果要多练习多看。