一、弹性效果
1.不要过渡,先编写基本界面
2.修改我们认为需要修改的属性
3.再回过头去给被修改属性的那个元素添加过渡即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡之弹性效果</title>
<style>
*{
margin: 0;
padding: 0
}
div{
height: 100px;
background-color: pink;
margin-top: 100px;
text-align: center;
line-height: 100px;
}
span{
font-size: 40px;
/* transition-property: margin;
transition-duration: 3s; */
transition: margin 3s;
}
div:hover span{
margin: 0 20px;
}
</style>
</head>
<body>
<div>
<span>马</span>
<span>天</span>
<span>宇</span>
<span>非</span>
<span>常</span>
<span>非</span>
<span>常</span>
<span>棒</span>
</div>
</body>
</html>
二、手风琴效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡手风琴效果</title>
<style>
*{
margin: 0;
padding: 0
}
ul{
width: 960px;
height: 300px;
margin: 100px auto;
border: 1px solid black;
overflow: hidden;
}
li{
list-style: none;
width: 160px;
height: 300px;
background-color: pink;
float: left;
/* border: 1px solid black;
box-sizing: border-box; */
transition-property: width;
transition-duration: 0.5s;
}
ul:hover li{
width: 100px;
}
ul li:hover{
width: 460px;
}
img{
height: 300px;
}
</style>
</head>
<body>
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpeg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
</body>
</html>