上海非凡教您这样的设计才吸眼球！高逼格设计师如何让网页＂！

来源：上海非凡进修学院日期：2020-01-15 14:33 浏览：36

导读：是不是别人的网页都在动？

是不是别人的网页都有交互？

是不是别人的网页做的像gif一样？

作为一名设计师在做设计的时候经常需要让页面有漂亮的动态效果，那就需要用到js或者各种各样的插件，又苦于不会js而瞬间就头大，作为网页设计培训老师的我在非凡学院从事教学的工作中，我们教授给学生的H5也能实现很多动态效果，也能让静态页面瞬间“活”起来，并且目前很多网页设计的工作也都要求设计师会H5，话说对于前端人员来说不懂H5的设计师不是一位好队友。

还有很多产品宣传页都只是展示内容或者效果而无需做开发，这样的对于会设计又会切图的设计师需求就比较大，毕竟能一个人做好的工作，老板一般都不喜欢请两个人浪费人力物力财力，所以技能永远是升职加薪的捷径。今天，非凡学院网页设计培训专业的张老师，为大家分享一下；如何让我们的网页设计动起来的。

那就来了解一下H5的动态效果的分类

1、最基本的鼠标经过:hover

这个可适用于任何css样式的操作，比如鼠标经过变颜色、变大小、变间距、变投影……，但有个缺点就是变化没有过渡的效果，整个过程很生硬。

2、变形transform

变形主要分为四个方面：旋转（rotate）、扭曲（skew）、缩放（scale）、位移（translate），利用这四种变形可以做很多漂亮的效果，很多时候配合:hover使用，当然如果区别于:hover，还需要一点就是过渡属性（Transition），加一句过渡使动画有了变化的过程，看起来更舒服更柔和，但相比之下也有个确点，就是只能在开始和结束两个状态中过渡，不能添加多个状态。

案例一：下面两个就是配合鼠标经过发生缩放，添加过渡效果。