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