Shulou(Shulou.com)06/01 Report--

Today, the editor to share with you how to use CSS to create a spotlight effect of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

The principle of implementing the CSS spotlight effect is simple:

The two text are completely overlapped, the inner layer is dark gray, and the outer layer has a gradient color.

Apply a circular mask to the outer text.

Finally, add CSS Animation.

Technical support

The CSS properties referenced are:

Linear-gradient ()

Background-image

Background-clip

Clip-path

Realize

In order to keep the HTML structure concise, pseudo-class elements are used later.

The HTML code is as follows:

I want to hide it in a can.

Note: attr () can theoretically be used for all CSS attributes, but currently only pseudo-element content attributes are supported. Other attributes and advanced features are currently experimental.

Translator's note: if you find that the advanced use of attr () in the browser compatibility table is still not well supported, most of this article is on paper.

Reference MDN document

The CSS code is as follows:

* {margin: 0; padding: 0;}: root {--ellipse: 6.25remt;} html, body {display: flex; justify-content: center; align-items: center; height: 100vh; background: # 222;} H2 {font-size: 4remt; color: # 333; width: 37.5remr; position: relative;} h2::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%); 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%);}}

Now the dynamic spotlight effect is complete.

But there is still a problem, I do not know if the careful partner found out, the text of the finished product is color, the principle is to add the background picture, and then the text as a mask, and finally change the color to transparent, so we have to modify the code.

Add code background-image and background-clip to h2:after:

H2::after {/ * Don't forget to change color to transparent * / color: transparent; background-image: linear-gradient (to left,#1a2a6c,#b21f1f,#fdbb2d); background-clip: text; / * because background-clip is the css attribute of the preview phase, add a prefix version * /-webkit-background-clip: text } these are all the contents of the article "how to use CSS to make a spotlight effect". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.