我是一个肤浅的人，
我喜欢好看的人，
也喜欢漂亮的衣服，
还有那酷炫的页面。
所以每当我开始写一个页面，都会花一些时间来构思，怎么让页面变得更加吸引人。
像我有这样不可救药的肤浅，就会有这样的职业病——每当看到什么网站的交互引人入胜我就会按下F12开发者工具来研究一下怎么实现的。
所以，慢慢地，我就变得很会“抄袭”，只要是纯CSS3实现的，我几乎都能通过查看开发者工具来实现…
1.运用开发者工具查看动画
我的“抄袭能力”都得力于强大的chrome开发者工具，更新到49版本之后，我回忆起初学编程的时候，大家都推荐我用火狐firebug来调试，可是现在chrome已经完胜firebug， 感觉已经无法相提并论。所以不努力的后果就是..被世事嫌弃，不管你曾经多辉煌…
Chrome开发者工具用来调试动画的利器是在样式这一栏右上角的两个小按钮，第一个可以筛选样式的状态，第二个用来调试动画。再用敏锐的洞察力查看Dom树上是否有：before、：after这样的伪类，基本上就能重现一个纯CSS3实现的动画了。
我来举个栗子：
我在做白玩页面（没有上线，不能附链接）的时候，有一个按钮：
默认状态，长这个样子：
鼠标移入之后，是这样子的（由于不会搞成gif图，请自行想象白色光芒划过鼠标的美感..）：
现在我点击筛选：hover，就能重新真实鼠标移入的时候的状态，点击调节动画，会发现有个多了个Animations的tab，百分比用来调节放慢动画的速度，这样就可以更好地研究动画是怎么形成的啦！
接下来，我们来研究DOM树，在a标签内部有一个:after的伪类，而动画的本质就是——伪类从左到右的滑动！！
查看样式发现：
伪类定义为一个块状元素，默认状态定位在a标签的左边以外，鼠标移入之后，慢慢滑动到a标签的右边以外，整个过程只是变化了left值。
很简单吧！
2.用动画类库的素材给页面增添活力
然而，我们说到动画，怎么能只有transform、transition呢？animation写出来的动画才是灵活多变的吖！
说起来也蛮惭愧的，我真的是从来不自己写动画，网上那么多类库，不就是用来给自己提升效率的嘛，反正我可以保证我要是自己写是写的没有别人好的。
举个简单的例子吧，网易的一个动画类库：
咋一看是不是觉得少，可用性不大？
然而——三月份的企业钱包项目，四月份的保险优惠活动页面，我都用到了这些动画。虽然我抄动画，可是我举一反三，不要太巧妙呀！
保险页面，我用了三个动画：
http://jr.tuniu.com/act/fitbit
http://jr.tuniu.com/act/haagendazs
①弹跳：女孩弹跳显得非常有活力，好符合糖果色、夏天这样的主题呀
【sass调用部分】
【动画帧部分】
@keyframes bounce{
0%,20%,50%,80%,100%{transform:translateY(0);}
40%{transform:translateY(-30px);}
60%{transform:translateY(-15px);}
}
②从左弹入：用于保险活动的主题和文案，从左弹入吸引人眼球
【sass调用部分】
【动画帧部分】
@keyframes bounceinL{
0%{opacity:0;transform:translateX(-200px);}
60%{opacity:1;transform:translateX(60px);}
80%{ transform:translateX(-20px);}
100%{transform:translateX(0);}
}
③从下弹入左右运动的两个人分别弹入后最后弹入礼品——智能手环！
【sass调用部分】
【动画帧部分】
@keyframes bounceinB{
0%{opacity:0;transform:translateY(100px);}
60%{opacity:1;transform:translateY(-30px);}
80%{transform:translateY(10px);}
100%{transform:translateY(0);}
}
不要问我动画帧怎么写的，我从来不写动画，请用chrome开发者工具查看相应source文件搜索相应样式~~~
3.Css3动画与js
Css3真是我这样既肤浅又懒惰的人的福音啊，喜欢炫酷的动画又不想费太多脑子写js，可是有的时候，没有js的帮助真的，完不成一些逼真的效果呀~
先介绍两个属性：
ani.addEventListener('animationstart',function() { }, false);
ani.addEventListener('animationend',function() {}, false);
obj.addEventListener('transitionstart',function (){}, false);
obj.addEventListener('transitionend',function (){}, false);
一看名字就知道什么意思了吧，动画开始时发生的事件和动画结束时发生的事件。
再举我写过的一个页面的例子——首付出发翻页效果：http://jr.tuniu.com/act/shoufuchufa
直接看js部分（js虽然写的挫了点 也费了我好多脑细胞的呀T T）
在翻页的过程中，要调换前后两页的层级顺序，要在什么时候调换呢，当然是转到90度的时候啦，两页内容只有一像素而已，神不知鬼不觉地调换层级。
所以要点是——先将要翻的两页内容旋转90度，然后赶紧调换层级，继续旋转剩下的90度，书本就完美地翻页啦~
就分享这么多，希望大家都可以做粗酷酷的页面，来吸引更多肤浅的人~over!
网友评论