最终效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/930f7854807648b0b9d53c27897b55cf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQWd3ZW5iaQ==,size_20,color_FFFFFF,t_70,g_se,x_16)
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 100vw;
height: 100vh;
background-color: #f5f5f5;
overflow: hidden;
}
.three-main{
width: 600px;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 100px auto;
}
.text{
display: inline-block;
width: 80px;
line-height: 80px;
text-align: center;
font-size: 28px;
color: var(--color);
}
.text-item{
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
cursor: pointer;
}
.text-item:hover{
transform: rotate(-30deg) skew(20deg);
}
.text-item::after{
position: absolute;
content: '';
width: 80px;
height: 80px;
border: 2px solid var(--color);
border-radius: 4px;
box-sizing: border-box;
}
.others{
display: block;
position: absolute;
width: 80px;
height: 80px;
box-sizing: border-box;
border-radius: 4px;
border: 2px solid var(--color);
transform: translateX(calc(var(--i) * -8px)) translateY(calc(var(--i) * 8px));
box-shadow: -1px 1px 3px var(--color);
opacity: 0;
transition: all 0.3s;
}
.text-item:hover .others{
opacity: calc((4 - var(--i)) * 0.25);
}
</style>
<body>
<div class="main">
<div class="three-main">
<div class="text-item" style="--color: #ec3e27">
<span class="others" style="--i:1"></span>
<span class="others" style="--i:2"></span>
<span class="others" style="--i:3"></span>
<span class="text">立</span>
</div>
<div class="text-item" style="--color: #fd79a8">
<span class="others" style="--i:1"></span>
<span class="others" style="--i:2"></span>
<span class="others" style="--i:3"></span>
<span class="text">体</span>
</div>
<div class="text-item" style="--color: #0984e3">
<span class="others" style="--i:1"></span>
<span class="others" style="--i:2"></span>
<span class="others" style="--i:3"></span>
<span class="text">效</span>
</div>
<div class="text-item" style="--color: #00b894">
<span class="others" style="--i:1"></span>
<span class="others" style="--i:2"></span>
<span class="others" style="--i:3"></span>
<span class="text">果</span>
</div>
</div>
</div>
</body>
</html>