我用css3 写了个缩放!很简单,就是用 transition + transform 很简单就实现了这个功能,而我们要做的就是
用js 实现相同的功能!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
ul {
width:700px;
border:1px solid gray;
margin: 20px auto;
}
.clearfix{
}
.clearfix::after{
display: block;
content: "";
clear:both;
}
ul li {
float: left;
list-style: none;
width:200px;
height: 200px;
background-color: pink;
margin:10px;
transition: all .5s;
line-height: 200px;
text-align: center;
color:white;
}
ul li:hover {
transform: scale(1.5);
background-color: #ccc;
color:red;
}
</style>
</head>
<body>
<ul class="clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li> <li>7</li> <li>7</li>
</ul>
</body>
</html>