When I was playing ae in college, I encountered this special effect. I saw a similar special effect on Baidu by chance, but I didn’t expect it to be realized with css, so I researched it. The effect of text sweeping is as follows:
Implementation ideas:
- Light effect movement effect, you can set the gradient color to simulate light effect through background-image, and then use animation to move the background image to move the light effect
- When the light effect passes over the text, the color of the text needs to be consistent with the color of the light effect. Here you need to use the background-clip:text attribute of css3 , and set the foreground color to transparent, so that when the background moves, the text color will remain the same as the background color unanimous
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扫光文字</title>
<style>
.shine-box {
width: 500px;
height: 100px;
margin: auto;
padding-top: 60px;
border-radius: 10px;
text-align: center;
background-color: black;
font-weight: bolder;
}
.shine-span {
background: #656565 linear-gradient(to left, transparent, #fff, transparent) no-repeat 0 0;
background-size: 20% 100%;
background-position: 0 0;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: shine 2s infinite;
}
@keyframes shine {
from {
background-position: 0% 0%;
}
to {
background-position: 100% 100%;
}
}
</style>
</head>
<body>
<div class="shine-box">
<span class="shine-span">玉不啄,不成器;人不学,不知道</span>
</div>
</body>
</html>
Note: background-clip needs to add the vendor prefix -webkit- in chrome to work