effect:
achieve:
1. Define the label:
<h1>aurora</h1>
2. Set the basic style of text:
h1{
text-transform: uppercase;
letter-spacing: 3px;
font-size: 15vw;
transform: rotate(-10deg) skew(30deg);
position: relative;
color: rgba(0, 101, 253, 0.6);
-webkit-text-stroke: 2px rgba(0, 101, 253, 0.6);
transition: all 1s;
}
text-transform: uppercase; The letter becomes uppercase.
letter-spacing: 3px; Letter spacing.
transform: rotate(-10deg) skew(30deg); First rotate -10deg, then tilt 30deg.
-webkit-text-stroke: 2px rgba (0, 101, 253, 0.6); text frame Details
transition: all 1s; transition effect
3. Mouse over the text to display the indentation effect:
h1:hover{
/* 先叠层白的，再叠层黑的，先叠的白会覆盖到黑，白的地方亮，黑的地方暗 */
text-shadow:3px 3px 6px #fff,
3px 3px 6px #fff,
0 0 0px #000;
}
The main method is to use the shadow to first layer the white shadow, and then layer the black shadow behind the white. In this way, the white areas are bright and the black areas are dark, forming an indentation effect.
4. Use the double pseudo-class to realize the upper part of the text, (note: the double pseudo-class will inherit some css attributes of the parent element):
h1::before{
content: 'aurora';
color: rgb(255, 255, 255);
position: absolute;
top: 0;
left: 0;
clip-path: inset(0 0 50% 0);
transition: all 1s;
transform: rotateX(0deg) skew(0deg);
}
position: absolute;
top: 0;
left: 0; Positioning.
clip-path: inset(0 0 50% 0); Crop, only the upper half of the text is displayed.
transform: rotateX(0deg) skew(0deg); Do not rotate or tilt temporarily.
5. Mouse over the upper half of the text to fold the text:
h1:hover::before{
transform: rotateX(-30deg) skew(-30deg);
color: rgb(243, 243, 243);
text-shadow: 0 0 1px black;
}
transform: rotateX(-30deg) skew(-30deg); Rotate -30deg, tilt -30deg.
color: rgb(243, 243, 243); The color becomes darker.
text-shadow: 0 0 1px black; shadow.
6. With the same result, set the lower part:
h1::after{
content: 'aurora';
color: rgb(255, 255, 255);
position: absolute;
top: 0;
left: 0;
clip-path: inset(50% 0 0 0);
transition: all 1s;
transform: rotateX(0deg) skew(0deg);
}
h1:hover::after{
transform: rotateX(40deg) skewX(20deg) ;
color: rgb(212, 212, 212);
text-shadow: 0 0 1px black;
}
Complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
h1{
text-transform: uppercase;
letter-spacing: 3px;
font-size: 15vw;
transform: rotate(-10deg) skew(30deg);
position: relative;
color: rgba(0, 101, 253, 0.6);
-webkit-text-stroke: 2px rgba(0, 101, 253, 0.6);
transition: all 1s;
}
h1:hover{
/* 先叠层白的，再叠层黑的，先叠的白会覆盖到黑，白的地方亮，黑的地方暗 */
text-shadow:3px 3px 6px #fff,
3px 3px 6px #fff,
0 0 0px #000;
}
h1::before{
content: 'aurora';
color: rgb(255, 255, 255);
position: absolute;
top: 0;
left: 0;
clip-path: inset(0 0 50% 0);
transition: all 1s;
transform: rotateX(0deg) skew(0deg);
}
h1:hover::before{
transform: rotateX(-30deg) skew(-30deg);
color: rgb(243, 243, 243);
text-shadow: 0 0 1px black;
}
h1::after{
content: 'aurora';
color: rgb(255, 255, 255);
position: absolute;
top: 0;
left: 0;
clip-path: inset(50% 0 0 0);
transition: all 1s;
transform: rotateX(0deg) skew(0deg);
}
h1:hover::after{
transform: rotateX(40deg) skewX(20deg) ;
color: rgb(212, 212, 212);
text-shadow: 0 0 1px black;
}
</style>
</head>
<body>
<h1>aurora</h1>
</body>
</html>
to sum up:
Xin Guo Man "Pillow Knife Song" is good-looking, recommended~
Other articles:
Colorful streamer text html+css
bubble floating background special effect html+css
simple clock special effect html+css+js
cyberpunk style button html+css
imitating NetEase cloud official website carousel image html+css+js
water wave loading animation html+ css
navigation bar scrolling gradient effect html+css+js
book page turning html+css
3D stereo album html+css
neon drawing board effect html+css+js
remember some CSS attribute summary (1)
Sass summary notes
... etc.