web前端经典教程之突出卖点

作为打工者，我们卖的是自己的技能和智慧；作为企业来说，卖的就是自己的产品和服务；为了尽可能的增加销售，总是会在合适的时候突出或者植入一下产品，生怕顾客没看到似的。有的除了把产品的设计打磨的极具质感以外，还会在产品展示中增加一点动效来吸引眼球。今天，我们拿电商的3C产品为例，讲解一下面对不同的设计时突出产品的动画技法吧！文章展示用的是静态jpg图片，具体动画效果请看文章后面的视频……

《正面站队款》

1. 这种适合由远至近层层渐隐出现，最后突出中间的主打产品，这样有没有一点黑涩会大佬出场的霸气呢？这里我还想到了一首跟这个节奏差不多的神曲，那就是Alan walker的那首《fade》。如果是在做影视后期的片头，我会把出场的时间跟音乐卡好点，形成共振的感觉……

《平铺斜放款》

1. 这种适合从左往右或者从右往左依次沿着倾斜角度飞入，这样会不会有一种黑客帝国的文字雨效果呢？这样既可以突出产品，又可以让活动显得隆重而盛大，潜在的告诉顾客，本次活动更优惠哦……！

《透视堆叠款》

1. 这种堆叠的适合从底层一个接一个按照各自的摆放方向飞入，不同款式的产品差不多同时集合在一起，看起来就有一种风云际会似的感觉，当然这是我杜撰的。

《正面交错款》

1. 这种除了像第一种方式那样出现，也可以左右交替淡入出现，效果也是非常不错的。

《三三两两款》

1. 这种三三两两在一起的，可以把两个当成一个略有出场差异的小整体，然后在从左往右或者从右往左依次上升出现，也可以达到突出产品的效果。

基本上通过上面五个企业实战案例的系统学习，你就可以掌握一些布局和css3动画了，可以花二十分钟左右试听一下下面那个高清视频的讲解，这样以后你除了只能在Adobe软件中输出以外，还可以将自己设计的东西放到浏览器、甚至视频播放器中传播啦！