body样式
<body>
<section class="text">
<span>李</span>
<span>先</span>
<span>生</span>
<span>2</span>
<span>0</span>
</section>
</body>
css样式
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
html,body{
width: 100%;
height: 100%;
}
body{
background-color: #FF90B3;
}
.text{
width: 600px;
margin: 250px auto 100px;
display: inline-block;
transition: 0.5s;
display: flex;
}
.text span{
background-color: #fff;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: skyblue;
font-size: 40px;
transition: 0.3s;
}
.text:hover span:nth-child(odd){
color: rgb(221, 123, 230);
box-shadow: 0 60px 20px rgba(0, 0, 0, 0.1);
transform: skewY(-10deg);
}
.text:hover span:nth-child(even){
color: rgb(221, 123, 230);
box-shadow: 0 60px 20px rgba(0, 0, 0, 0.1);
transform: skewY(10deg);
}
</style>
效果