无聊随便搞搞,老活新整
效果预览
小技巧
- 分三层,每层显示一部分
- 使用
transform3D
的perspective
和skew
来配合切换 - 使用
mask
来遮罩图层(我也提供了常规clip-path
方法) - 使用
#0000
来表示透明,#000
与#000000
是相等的,最后的0
表示透明度为0,#0000
其实就是#00000000
的简写。就像80
透明度代表50%
- 最后就是疯狂调参数就行了,随便搞搞
完整代码
<main>
<h1>LINUXDO</h1>
<h1>LINUXDO</h1>
<h1>LINUXDO</h1>
</main>
body {
height: 100vh;
overflow: hidden;
display: grid;
place-content: center;
background: #1c1c1e;
main {
transform: perspective(1000px) skewY(15deg);
transition: all 1s;
cursor: pointer;
&:hover {
transform: perspective(1000px) skewY(0);
h1:nth-child(2),
h1:nth-child(3) {
transform: translate(-50%, -50%) skewX(0);
left: 0;
color: #fff;
}
}
h1 {
margin: 0;
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
font-family: Microsoft Yahei, sans-serif;
font-size: 14em;
color: #fff;
text-transform: uppercase;
transform-style: preserve-3d;
transition: all 1s;
&:nth-child(1) {
/* clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); */
mask: linear-gradient(#000 0 45%, #0000 0 100%);
}
&:nth-child(2) {
color: #ffb003;
transform: translate(-50%, -50%) skewX(-55deg);
left: -20px;
/* clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%); */
mask: linear-gradient(#0000 0 045%, #000 0 55%, #0000 0 100%);
}
&:nth-child(3) {
transform: translate(-50%, -50%) skewY(0);
left: -42px;
/* clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); */
mask: linear-gradient(#0000 0 55%, #000 0 100%);
}
}
}
}