CSS3热身实战-过渡与动画.doc

《CSS3热身实战-过渡与动画.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、过渡与动画概念理解css3过渡化用菜鸟教程的说法，CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：1.指定要添加效果的CSS属性。2.指定效果的持续时间。css3动画化用菜鸟教程的说法，CSS3动画是根据@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。指定至少这两个CSS3的动画属性绑定向一个选择器：1.规定动画的名称。2.规定动画的时长。3.过渡案例-炫酷下拉3-1原理分析1.首先就是一个导航下拉，就是鼠标放上去出现一个下拉列表2.然后发现，下

2、拉里面，每一个选项是从不同的两个方向出现的3.出现的方式是奇数项从左边进，偶数项从右边进，进入方式是滑动淡入。3-2实现过程1.首先页面的布局，这个应该大家都知道，菜单无非就是一个ul-li列表，下拉列表就是li下面的一个ul-li。reset.css（样式重置表和个人常用样式封装）*{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ol,ul{list-style:none}address,caption,cite,code,d

3、fn,em,strong,th,var{font-style:normal;font-weight:400}fieldset,img{border:0}textarea{resize:none}a{color:#000;text-decoration:none}.fontsize24,h1{font-size:24px}.fontsize20,h2{font-size:20px}.fontsize18,h3{font-size:18px}.fontsize16,h4{font-size:16px}.fontsize1

4、4,h5{font-size:14px}.fontsize12,h6{font-size:12px}.bold{font-weight:700}.fllilli{float:left}.fllirli{float:right}.fl{float:left}.fr{float:right}.radius{border-radius:100%}.positionCenterLeft{left:0;right:0;margin:auto}.positionCenterTop{top:0;bottom:0;margin:au

5、to}.positionCenter{top:0;bottom:0;left:0;right:0;margin:auto}.distable{display:table}.distablecell{display:table-cell;vertical-align:middle}.textels{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.marginCenter{margin:0auto}.t_l{text-align:left}.t_c{t

6、ext-align:center}.t_r{text-align:right}.unLine{text-decoration:underline}.fiexd{position:fixed}.absolute{position:absolute}.relative{position:relative}.wrapper{clear:both;overflow:hidden}.o-hidden{overflow:hidden}.hidden{display:none}.block{display:block}.lbloc

7、k{display:inline-block}.clear{clear:both}.pointer{cursor:pointer}img{border:0;vertical-align:middle}html代码如下