光斑动画

时间 2019-12-10

标签光斑动画繁體版

原文原文链接

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

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

1.线性渐变linear-gradient（）html

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

3.属性的透明rgba（）web

4.背景图的偏移动画

代码：spa

<!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>

一个简单的css3的光斑动画就完成了。code