<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font: 8em '微软雅黑';
padding: 200px;
}
.zhi{
margin: 0.2em;
color: #369;
position: relative;
}
.zhi::before,.zhi::after{
content: attr(data-zhi);
position: absolute;
top: 0;
left: 0;
transform-origin: left top;
transition: all 0.3s;
}
.zhi::before{
color: #fff;
z-index: 3;
transform: rotateY(-15deg);
}
.zhi::after{
color: rgba(0,0,0,.2);
transform: scale(1.1,1);
z-index: 2;
}
.zhi:hover::before{
color: #fafafa;
transform: rotateY(-40deg) skewY(3deg);
}
.zhi:hover::after{
transform: scale(1.2,1) rotateY(-20deg) skewY(4deg);
}
</style>
</head>
<body>
<span class='zhi' data-zhi='宝'>宝</span>
<span class='zhi' data-zhi='宝'>宝</span>
<span class='zhi' data-zhi='不'>不</span>
<span class='zhi' data-zhi='哭'>哭</span>
</body>
</html>
