2015-4-20 BAV推广页面修改前后对比-安全网购

要灵活使用背景定位：background-position。

背景大小：background-size。 Contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

利用好padding 设置背景色。

用@media screen and实现页面自适应。

注意继承性，减少重复代码。

box-shadow设置边框阴影

动画与元素绑定：

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 转换元素定义透视视图。

使用动画效果

.music-play {

    -webkit-animation: musicPlay infinite 2s linear;

    animation: musicPlay infinite 2s linear;

}。

@-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软件使用的不熟悉。使工作效率很低。

给各个部分取一个好名字一个重点。

减少重复代码减少代码量。

动画效果要多练习多看。