1.过度的基本介绍及写法
1 .div{ 2 width: 200px; 3 height: 200px; 4 background-color: red; 5 position: absolute; 6 left: 100px; 7 top: 100px; 8 /*简写：transition：属性名称 过度时间 时间函数 延迟*/ 9 /*transition: left 2s linear 0s;*/ 10 /*多个样式添加*/ 11 /*transition: left 2s linear 0s,background-color 2s linear 0s;*/ 12 /*为多个样式同时添加过度样式 all：所有样式 13 效率低下，避免用 14 steps（4）：可以让过度效果分为制定的几次来完成 15 */ 16 transition: all 2s steps(4); 17 -moz-transition: all 2s steps(4); 18 -webkit-transition: all 2s steps(4); 19 -o-animation: all 2s steps(4); 20 }
2.过度小案例：伸缩菜单项
2.1.html代码
1 <div class="menu"> 2 <div class="item"> 3 <h3>市内新闻</h3> 4 <div class="itemBox"> 5 <ul> 6 <li>深圳超市枪杀案</li> 7 <li>深圳超市枪杀案</li> 8 <li>深圳超市枪杀案</li> 9 <li>深圳超市枪杀案</li> 10 <li>深圳超市枪杀案</li> 11 </ul> 12 </div> 13 </div> 14 <div class="item"> 15 <h3>市内新闻</h3> 16 <div class="itemBox"> 17 <ul> 18 <li>深圳超市枪杀案</li> 19 <li>深圳超市枪杀案</li> 20 <li>深圳超市枪杀案</li> 21 <li>深圳超市枪杀案</li> 22 <li>深圳超市枪杀案</li> 23 </ul> 24 </div> 25 </div> 26 <div class="item"> 27 <h3>市内新闻</h3> 28 <div class="itemBox"> 29 <ul> 30 <li>深圳超市枪杀案</li> 31 <li>深圳超市枪杀案</li> 32 <li>深圳超市枪杀案</li> 33 <li>深圳超市枪杀案</li> 34 <li>深圳超市枪杀案</li> 35 </ul> 36 </div> 37 </div> 38 39 <div class="item"> 40 <h3>市内新闻</h3> 41 <div class="itemBox"> 42 <ul> 43 <li>深圳超市枪杀案</li> 44 <li>深圳超市枪杀案</li> 45 <li>深圳超市枪杀案</li> 46 <li>深圳超市枪杀案</li> 47 <li>深圳超市枪杀案</li> 48 </ul> 49 </div> 50 </div> 51 </div>
2.2.css代码
1 <style> 2 .menu{ 3 width: 200px; 4 height: auto; 5 margin: 100px auto; 6 } 7 .item{ 8 width: 100%; 9 height: auto; 10 } 11 .item>h3{ 12 height: 40px; 13 line-height: 40px; 14 background-color: #85b7ff; 15 color: orange; 16 border-bottom: 2px solid #ccc; 17 padding-left: 10px; 18 } 19 .item > .itemBox{ 20 width: 100%; 21 height: 0; 22 overflow: hidden; 23 transition-property: height; 24 transition-duration: 1s; 25 } 26 .item > .itemBox > ul{ 27 list-style: none; 28 background-color: #efffc7; 29 padding: 10px; 30 } 31 .item:hover > .itemBox{ 32 height: 130px; 33 } 34 35 </style>