主要代码说明
包裹字体的卡片必须
display: inline-block; display: flex;
transform: skewY(-20deg)
; /扭曲属性/
nth:-child(odd)odd
代表奇数even
代表偶数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
background-color: #ff90b3;
}
.text{
width: 600px;
margin: 250px auto 100px;
display: inline-block;
transition: .5s;
display: flex;
}
.text span{
background-color: #fff;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
color: #a0a0a0;
font-size: 40px;
transition: 0.3s;
}
.text:hover span:nth-child(odd){
transform: skewY(-20deg); /*扭曲*/
color: #b5b5b5;
box-shadow: 0 60px 20px rgba(0, 0, 0, 0.1);
}
.text:hover span:nth-child(even){
transform: skewY(20deg); /*扭曲*/
color: #b5b5b5;
box-shadow: 0 60px 20px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<section class="text">
<span>来</span>
<span>了</span>
<span>!</span>
<span>老</span>
<span>弟</span>
</section>
</body>
</html>