用html css 制作聚光灯照射文字特效闪光文字动画效果cid1175+源码下载
html and css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webIQ</title>
<link rel="stylesheet" href="" />
<style>
* {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
}
p {
position: relative;
font-family: sans-serif;
font-size: 4em;
letter-spacing: 4px;
overflow: hidden;
background: linear-gradient(90deg, #000, #fff, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 6s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
</style>
</head>
<body>
<p>Learn Web Designing with webIQ</p>
</body>
</html>
获取源码: webIQ - Shining Text Animation
下载数:266人次, 文件大小: 86 B, 上传日期: 2021年-9月-06日
公众号回复:gcode 获取解压密码
3,518 人查阅
一键获取本网站前端代码设计的所有源码
获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
您需要先支付 6元 才能查看此处内容！立即支付
