使用CSS+JS实现光斑文字效果

1.实现原理 通过背景渐变 画出光斑范围  后通过  -webkit-background-clip: text 进行文字填充

直接上代码

 

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             html,body{
12                 background-color: black;
13                 overflow: hidden;
14                 height: 100%;
15                 text-align: center;
16             }
17             h1{
18                 margin-top: 50px;
19                 font:bolder 80px "微软雅黑";
20                 display:inline-block;
21                 color: rgba(255,255,255,.3);
22                 /*背景渐变效果*/
23                 background: linear-gradient(120deg,rgba(255,255,255,0) 60px,rgba(255,255,255,1) 120px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 240px);
24                 /*背景不平铺*/
25                 background-repeat: no-repeat;
26                 /*文字填充*/
27                 -webkit-background-clip: text;
28             }
29             
30         </style>
31     </head>
32     <body>
33         <h1>你好呀小菜鸟</h1>
34         
35         
36     <script type="text/javascript">
37         var h1=document.querySelector("h1");
38         var flag=-180;
39         //鼠标移入
40         
41         window.setInterval(function(){
42         flag+=10;
43         if(flag==480){
44             flag=-180;
45         }
46         h1.style.backgroundPositionX=flag+"px";
47         },60)
48         
49         
50     </script>
51     </body>
52 </html>

 

posted @ 2020-03-11 16:13  花儿咋这红  阅读(549)  评论(2)    收藏  举报