<style>
body {
margin: 0;
padding: 0;
font-family: '微软雅黑';
background-color: #F7F7F7;
}
.text-box {
margin-top: 100px;
text-align: center;
line-height: 1;
font-size: 100px;
/*color: #065DAC;*/
}
.text-box span {
display: inline-block;
position: relative;
}
.text-box span::before,
.text-box span::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
transition: all 1s;
transform-origin: left center;
}
/*翻起的页*/
.text-box span::before {
z-index: 3;
color: #eee;
transform: rotateY(-15deg);
}
/*影子*/
.text-box span::after {
z-index: 2;
color: rgba(0, 0, 0, 0.3);
}
/* skew：倾斜（可以看成是x轴向右上方（-y方向）倾斜了45度，y轴向远离眼睛的方向(-z方向)倾斜了45度）
（相当于rotate倾斜了45度，可以看成是整个坐标系向-x-y+z这个方向倾斜了45度）
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
*/
.text-box:hover span::before {
transform:skew(45deg, 0deg);
}
/*影子*/
.text-box:hover span::after {
transform: skew(0deg, 20deg);
}
</style>
<body>
<div class="text-box">
<span data-text="凯">凯</span>
<span data-text="旋">旋</span>
<span data-text="而">而</span>
<span data-text="归">归</span>
</div>
</body>
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
