光斑动画

最新推荐文章于 2020-06-13 19:51:01 发布

转载最新推荐文章于 2020-06-13 19:51:01 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hsBK/p/10977793.html

先上一个效果图，光斑会自左向右不停运动

说白了就是一个背景图的渐变，利用的技术点主要有：

1.线性渐变linear-gradient（）

2.根据文字剪切背景图-webkit-background-clip: text;

3.属性的透明rgba（）

4.背景图的偏移

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>光斑动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            background-color: black;
            overflow: hidden;
            text-align: center;
        }
        #text{
            display: inline-block;
            font-size: 80px;
            font-weight: bold;
            color: rgba(255,255,255,.3);
            -webkit-background-clip: text;
            background-repeat: no-repeat;
            background-position:-190px 0 ;
            background-image:linear-gradient(120deg,rgba(255,255,255,0) 50px,rgba(255,255,255,1)100px,rgba(255,255,255,0)150px);
        }
    </style>
</head>
<body>
    <div id="text">
        中科爱讯科技有限公司
    </div>
    <script>
        window.onload=()=>{
            let text=document.getElementById('text');
            let num=-190
            setInterval(()=>{
                num++
                if(num>=880){
                    num=-190
                }
                text.style.backgroundPosition=num+'px'；
            },3)
        }
    </script>
</body>
</html>