边框阴影闪动 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            background-color: #000;
        }
        
        #div1 {
            font: 130px/130px georgia, sans-serif;
            line-height: 500px;
            color: #fff;
            text-shadow: 0 0 10px sandybrown, 0 0 20px sandybrown, 0 0 30px sandybrown, 0 0 40px rgb(115, 111, 128), 0 0 70px rgb(118, 96, 244), 0 0 100px rgb(118, 96, 244);
        }
    </style>
</head>

<body>
    <div id="div1">
        Hello NENO Font!
    </div>
    <script>
        var div1 = document.getElementById('div1');

        setInterval(function() {
            setInterval(function() {
                div1.style.textShadow = ' 0 0 10px sandybrown, 0 0 20px sandybrown, 0 0 30px sandybrown, 0 0 40px rgb(115, 111, 128), 0 0 70px rgb(118, 96, 244), 0 0 100px rgb(118, 96, 244)';
            }, 400);
            setInterval(function() {
                div1.style.textShadow = '0 0 0 #fff';
            }, 800);

        }, 1600);
    </script>
</body>

</html>

　　

Document

Hello NENO Font!
posted @ 2022-03-22 19:34  33的男孩  阅读(24)  评论(0)  编辑  收藏  举报