h5-过度 | 易学教程

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>

来源：https://www.cnblogs.com/FengBrother/p/11383065.html

标签

transition