h5-过度

1.过度的基本介绍及写法

 .div{
             width: 200px;
             height: 200px;
             background-color: red;
             position: absolute;
             left: 100px;
             top: 100px;
             /*简写：transition：属性名称  过度时间  时间函数  延迟*/
             /*transition: left 2s linear 0s;*/
             /*多个样式添加*/
             /*transition: left 2s linear 0s,background-color 2s linear 0s;*/
             /*为多个样式同时添加过度样式  all：所有样式
             效率低下，避免用
             steps（4）：可以让过度效果分为制定的几次来完成
             */
             transition: all 2s steps(4);
             -moz-transition: all 2s steps(4);
             -webkit-transition: all 2s steps(4);
             -o-animation: all 2s steps(4);
         }

2.过度小案例：伸缩菜单项

2.1.html代码

 <div class="menu">
     <div class="item">
         <h3>市内新闻</h3>
         <div class="itemBox">
             <ul>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
             </ul>
         </div>
     </div>
     <div class="item">
         <h3>市内新闻</h3>
         <div class="itemBox">
             <ul>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
             </ul>
         </div>
     </div>
     <div class="item">
         <h3>市内新闻</h3>
         <div class="itemBox">
             <ul>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
             </ul>
         </div>
     </div>

     <div class="item">
         <h3>市内新闻</h3>
         <div class="itemBox">
             <ul>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
                 <li>深圳超市枪杀案</li>
             </ul>
         </div>
     </div>
 </div>

2.2.css代码

     <style>
         .menu{
             width: 200px;
             height: auto;
             margin: 100px auto;
         }
         .item{
             width: 100%;
             height: auto;
         }
         .item>h3{
             height: 40px;
             line-height: 40px;
             background-color: #85b7ff;
             color: orange;
             border-bottom: 2px solid #ccc;
             padding-left: 10px;
         }
         .item > .itemBox{
             width: 100%;
             height:;
             overflow: hidden;
             transition-property: height;
             transition-duration: 1s;
         }
         .item > .itemBox > ul{
             list-style: none;
             background-color: #efffc7;
             padding: 10px;
         }
         .item:hover > .itemBox{
             height: 130px;
         }

     </style>