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

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

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

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

动画效果要多练习多看。

转载于:https://www.cnblogs.com/lzsxi/p/4451272.html

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

dux修改index.php,DUX全站底部推广区修改
DUX主题默认的全站底部推广区是深灰色的,而且上面除了一行推广文字及两个可选择是否启用的按钮外就没有什么特别的装饰了,一直觉的这默认的推广区丑丑的不适合自己网站风格,最近从网上查找了不少资料终于将它给 ...
项目2-2软文推广页面
软文推广页面首先给大家看效果图: 背景是我自己随便找了一张背景图黄颜色一种比较亮的图,所以文字应该选取黑色这样看起来使人舒服: 下面来详细说说上述图的效果如何做出来的:首先将整个图可以看成是一个sec ...
UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址
UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址实际案例图片修改收货地址和修改默认地址页面布局和功能具体内容图片自己替换哈,随便找了个图片的做示例用到了vuex的状态机,具体 ...
vue多个页面引用相同组件在一个页面修改数据多个页面受影响
例如多个页面引用树结构当页面修改树结构默认值时离开的页面选择的树的数据会被修改查看很久发现不管当前路由是否为active 都会被修改解决办法:将树组件中的mounted和watch改为ac ...
海洋视音盒 v1.2 - 2015.1.20 更新终结版
软件大小:2.91MB 软件语言:中文软件类型:国产软件软件授权:免费软件更新时间:2015/1/20 软件类别:视频播放应用平台:WinXP,win7 本软件是一款集百度随心听.豆瓣音乐电台 ...
10.21软文推广页面
10.21软文推广页面考察内容: 1.自定义font 2.i标签的使用以及一些font图标的使用 http://sl31.gitee.io/sl_zuoyeku/fontandi/index.htm ...
ECshop 页面修改及出错处理方法基础知识(第一部分)
ECshop 页面修改及出错处理方法基础知识(第一部分) (2013-05-20 17:04:32) 转载▼ 1.ecshop,用户注册页面相关说明用户注册地址:user.php?act=regis ...
thyme leaf页面修改以后实时生效的方式
方式一. 禁用掉thyme leaf模板引擎的缓存,在application.properties配置文件中加入如下代码 spring.thymeleaf.cache=false 方式二. 页面修改完 ...
HDFS权限管理、用户身份认证和数据访问授权、UGO权限管理、umask权限掩码、UGO权限相关命令、Web页面修改UGO权限
HDFS权限管理 1.1 总览概述作为分布式文件系统,HDFS也集成了一套兼容POSIX的权限管理系统.客户端在进行每次文件操时,系统会从用户身份认证和数据访问授权两个环节进行验证: 客户端的操作请 ...

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

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

最新文章

热门文章