Home > Article > Web Front-end > 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:
CSS Animation
at the end. The referenced CSS properties are:
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 thecontent
attribute of the pseudo-element, other attributes and advanced features are currently experimentalTranslator'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
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!