光斑動畫

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。