<h1 data-heading="真的酷！">真的酷！</h1>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
body {
background-color: #6c8aea;
width: 100%;
height: 100vh;
}
h1 {
text-transform: uppercase;
transform: translate(-50%, -50%) skew(-10deg, 0);
top: 50%;
left: 50%;
margin: 0;
position: absolute;
font-size: 12vw;
font-weight: 400;
white-space: nowrap;
color: #312d50; /*中间颜色*/
letter-spacing:2vw;
z-index: 1;
}
h1::after, h1::before {
transition: all 250ms ease;
backface-visibility: hidden;
content: attr(data-heading);
position: absolute;
}
h1::after {
left: -15px;
top:-15px;
z-index:2;
-webkit-text-stroke: 3px #b4b5ff; /*上层颜色*/
-webkit-text-fill-color: transparent;
}
h1::before {
z-index:-1;
left: 15px;
top: 15px;
color: #4c6aca; /*底层颜色*/
}
h1:hover::after {
left: -20px;
top:-20px;
}
h1:hover::before {
left: 20px;
top: 20px;
}