1. Achieve results
2. Implementation steps
2.1. Write a H2 tag
<h2 content="Susu"> susu < / h2 >Copy the code
2.3. Set font hollowing
body {
margin: 0;
padding: 0;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #222;
min-width: 1200px;
}
h2 {
color: #fff;
font-size: 8em;
color: transparent;
-webkit-text-stroke: 2px #00ffff;
position: relative;
}
Copy the code
The effect is as follows:
2.3 the text – stroke attribute
Use the stroke attribute of text-stroke text, color: transparent, to achieve the effect of hollowing out the font.
Text-stroke is a shorthand for the properties text-stroke-width and text-stroke-color.
Text-stroke-width: Sets or retrieves the stroke thickness of the text in the object text-stroke-color: sets or retrieves the stroke color of the text in the objectCopy the code
2.4 H2 adds a pseudo-element with the same text
h2::before {
content: attr(content);
position: absolute;
top: 0;
left: 0;
color: #00ffff;
animation: a 4s ease-in-out infinite;
}
Copy the code
Content Sets the content of the pseudo-element, which gets the element attribute content with the attr attribute.
Set an animation effect for it
@keyframes a {
0%,
100% {
-webkit-clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);
clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);
}
50% {
-webkit-clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%); }}Copy the code
2.5 clip – path
Clip-path creates a clipping region where only parts of the element can be displayed. The part inside the region is displayed, and the part outside the region is hidden. The clip-path attribute values can be:
We recommend a clip-Path online website to help us quickly draw the shape we want.Clip-path Generates websites online
3. Complete code:
<! DOCTYPE html> <html> <head> <meta charset="utf-8">
<title></title>
</head>
<style>
body {
margin: 0;
padding: 0;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #222;
min-width: 1200px;
}
h2 {
color: #fff;
font-size: 8em;
color: transparent;
-webkit-text-stroke: 2px #00ffff;
position: relative;
}
h2::before {
content: attr(content);
position: absolute;
top: 0;
left: 0;
color: #00ffff;
animation: a 4s ease-in-out infinite;
}
@keyframes a {
0%,
100% {
-webkit-clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);
clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);
}
50% {
-webkit-clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
}
}
</style>
<body>
<h2 content="Susu"</h2> </body> </ HTML >Copy the code
4. Preview online
Sue Sue codepen