[teemo][20161207][html+css]页面元素在鼠标悬停时的浮起特效

 

一加手机官网的这种布局以及hover效果，有种极简的感觉，我很喜欢，所以现在就尝试实现一下。

hover的时候，产生阴影（box-shadow）、向上浮动（transform的translate3d方法）、动画执行的速度明前开始与结尾缓慢而中间快（transition的cubic-bezier方法）

 

收获：

css的动画效果很强大

transition控制元素属性变化的过渡动画；

transform则是控制元素的移动、旋转、变形，各种各样的变形，可以用于制作好看的页面特效，也可以单纯为了布局改变元素形状；

 

实用技巧：

1、

white-space属性的实用技巧

white-space:nowrap;禁止元素中的文本换行；

ul元素设置这个，再给里面的li设置display:inline-block;

可以使ul中的li元素略微超出ul的宽度，也不会换行。这样在设置了li元素的宽度为百分比，并且带有border、margin的时候非常有用；

 

2、

translation属性与cubic-bezier

translation属性：W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

http://www.w3school.com.cn/cssref/pr_transition.asp

transition: all 1s cubic-bezier(.55, 0, .1, 1);

cubic-bezier：http://www.jianshu.com/p/d999f090d333，这是动画播放的速度曲线

 

3、transform属性及用法http://www.w3school.com.cn/cssref/pr_transform.asp

提供各种各样的变形方法，可以移动、旋转、拉伸变形等等；

 

全部代码：

https://files.cnblogs.com/files/foresthouse/%E4%B8%80%E5%8A%A0%E6%89%8B%E6%9C%BA.zip