1、弹性效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
background-color: red;
height: 100px;
margin-top: 200px;
text-align: center;
line-height: 100px;
}
div span {
font-size: 50px;
}
div:hover span {
margin-left: 150px;
transition-property: margin-left;
transition-duration: 2s;
}
</style>
</head>
<body>
<div>
<span>弹</span>
<span>性</span>
<span>效</span>
<span>果</span>
<span>演</span>
<span>示</span>
</div>
</body>
</html>
2、手风琴效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 300px;
width: 1000px;
margin: 0 auto;
margin-top: 200px;
border: 1px solid #000;
}
div ul {
list-style: none;
}
div ul li {
width: 200px;
height: 300px;
box-sizing: border-box;
float: left;
border: 1px solid black;
overflow: hidden;
}
div ul:hover li {
width: 100px;
transition: 0.5s;
}
div ul li:hover {
width: 600px;
transition: 0.5s;
}
div ul li img {
height: 300px;
width: 600px;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="手风琴演示1.jpeg" alt=""></li>
<li><img src="手风琴演示2.png" alt=""></li>
<li><img src="手风琴演示3.jpeg" alt=""></li>
<li><img src="手风琴演示4.png" alt=""></li>
<li><img src="手风琴演示5.png" alt=""></li>
</ul>
</div>
</body>
</html>