How to create a spotlight effect using CSS (code attached)

How to use CSS to create a spotlight effect? The following article will analyze the implementation principle and share the implementation code of CSS spotlight effect. I hope it will be helpful to everyone!

The implementation principle of CSS spotlight effect is very simple:

• Completely overlap the two texts, the inner layer is dark gray, and the outer layer is Gradient color. [Recommended learning: css video tutorial]
• Apply a circular mask to the outer text.
• Add CSS Animation at the end.

Technical Support

The referenced CSS properties are:

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

implementation

In order to keep the HTML structure simple, pseudo-class elements will be used later.

HTML code is as follows:

<h1 data-text="我想藏在罐头里!!!">我想藏在罐头里</h1>

Note: attr() Theoretically it can be used for all CSS properties but currently supported Only the content attribute of the pseudo-element, other attributes and advanced features are currently experimental

Translator's Note: If you find that the browser is compatible with attr( ) still does not have good support, most of the content of this article is just talk on paper

QuoteMDN document

The CSS code is as follows:

*{
    margin: 0;
    padding: 0;
}

:root{
  --ellipse: 6.25rem;
}

html, body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #222;
}
h1{
    font-size: 4rem;
    color: #333;
    width: 37.5rem;
    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%);
    }
}

The effect is as follows:

Now the dynamic spotlight effect is completed.

But there is still a problem. I wonder if my attentive friends have noticed it. The text in the finished product is color. The principle is to add a background image, and then use the text as a mask. Finally Change color to transparent, so we need to modify the code.

Add code background-image and background-clip in h1:after:

h1::after{
    /* 别忘记修改color为透明 */
    color: transparent;
    background-image: linear-gradient(to left,#1a2a6c,#b21f1f,#fdbb2d);
    background-clip: text;
    /* 因为background-clip是预览阶段的css属性，要加上一个前缀版本 */
    -webkit-background-clip: text;
}

Look at the final The finished effect:

The source code of the demonstration is here CodePen link:

https://codepen.io/jackbrens/pen/MWrGNed

Summary

The above is the entire content of this sharing~~

If you think the article is well written and has inspired you, please don’t be stingy. Like and Follow and leave your valuable opinions in the comment area~~

(Learning video sharing: web front end)

The above is the detailed content of How to create a spotlight effect using CSS (code attached). For more information, please follow other related articles on the PHP Chinese website!