过渡模块-编写过渡效果：
1、编写过渡套路：
1.1不要管过渡，先编写基本界面
1.2修改我们认为需要修改的属性
1.3再给被修改属性的元素添加过渡即可
2、弹性效果
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 100px;
background-color: red;
font-size: 80px;
margin: 200px auto;
text-align: center;
}
div span{
/*transition-property:margin;*/
/*transition-duration:2s;*/
transition:margin 2s ease 0s;
}
div:hover span{
margin: 0 30px;
}
</style>
<body>
<div>
<span>计</span>
<span>算</span>
<span>机</span>
<span>科</span>
<span>学</span>
<span>与</span>
<span>技</span>
<span>术</span>
</div>
</body>
2、手风琴效果
<style>
*{
margin: 0;
padding: 0;
}
ul{
border: 1px solid #000;
margin: 300px auto;
height: 500px;
1800px;
overflow: hidden;
}
ul li{
list-style: none;
height: 500px;
300px;
float: left;
transition:width 0.5s;
}
ul li img{
height: 500px;
}
ul:hover li{
200px;
}
ul li:hover{
800px;
}
</style>
<body>
<ul>
<li><img src="images/手风琴/1.jpg" alt=""/></li>
<li><img src="images/手风琴/3.jpg" alt=""/></li>
<li><img src="images/手风琴/4.jpg" alt=""/></li>
<li><img src="images/手风琴/2.jpg" alt=""/></li>
<li><img src="images/手风琴/5.jpg" alt=""/></li>
<li><img src="images/手风琴/6.jpg" alt=""/></li>
</ul>
</body>