Make writing a habit together! This is my fourth day of digging Gold Day New Plan April Text Challenge,Click here for more details

preface

Today we will use HTML and CSS to create a spotlight effect.

The implementation principle is simple:

  • Overlay the two text completely, with a dark gray inside and a gradient outside.
  • Cover the outer text with a circular mask.
  • Then addCSS Animation.

Technical support

The CSS attributes referenced are:

  • linear-gradient()
  • background-image
  • background-clip
  • clip-path

implementation

To keep the HTML structure simple, pseudo-class elements will be used later.

The HTML code is as follows:

<h1 data-text=" I want to hide in a can!!" </h1> </h1>Copy the code

Note: attr() can theoretically be used for all CSS properties, but currently only supports content properties for pseudo-elements. Other properties and advanced features are experimental for now

If you find that the advanced use of attr() in the browser compatibility table is still not well supported, most of this article will be empty talk

Refer to the MDN document

The CSS code is as follows:

*{ margin: 0; padding: 0; } : root {- the ellipse: 6.25 rem; } html, body{ display: flex; justify-content: center; align-items: center; height: 100vh; background: #222; } h1{ font-size: 4rem; color: #333; Width: 37.5 rem; position: relative; } h1::after{ /* attr(attribute_name) */ content:attr(data-text); position: absolute; top: 0; left: 0; color: pink; clip-path: ellipse(var(--ellipse) var(--ellipse) at 0% 50%); animation: move 5s infinite; } @keyframes move{ 0%, 100%{ clip-path: ellipse(var(--ellipse) var(--ellipse) at 0% 50%); } 50%{ clip-path: ellipse(var(--ellipse) var(--ellipse) at 100% 50%); }}Copy the code

The implementation effect is as follows:

The dynamic spotlight effect is now complete.

But there is still a problem, I don’t know if you have noticed it. The text of the finished product is in color. The principle is to add the background picture, then use the text as a mask, and finally change the color to transparent.

Add background-image and background-clip to h1:after:

H1 ::after{/* don't forget to change color to transparent */ color: transparent; background-image: linear-gradient(to left,#1a2a6c,#b21f1f,#fdbb2d); background-clip: text; /* Webkit-background-clip: text; /* Webkit-background-clip: text; }Copy the code

Take a look at the final result:

The source code for the 👉 demo is linked here at CodePen.

conclusion

And that’s all for this share

If you think the article is well written and inspiring, please do not hesitate to like and follow it and leave your valuable opinion in the comments section ~~😃