5.6HTML文字特效 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>150.CSS发光的文字特效</title>
    <link href="./style.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: arial;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: #07252d;
        }

        h2 {
            position: relative;
            font-size: 6em;
            letter-spacing: 15px;
            color: #0e3742;
            text-transform: uppercase;
            text-align: center;
            -webkit-box-reflect: below 1px linear-gradient(transparent, #0008);
            line-height: 0.7em;
            outline: none;
            animation: animate 5s linear infinite;
        }

        @keyframes animate {

            0%,
            18%,
            20%,
            50.1%,
            60%,
            65.1%,
            80%,
            90.1%,
            92% {
                color: #0e3742;
            }

            18.1%,
            20.1%,
            50.1%,
            60%,
            65.1%,
            80%,
            90.1%,
            100% {
                color: #fff;
                text-shadow: 0 0 10px #03bcf4,
                    0 0 20px #03bcf4,
                    0 0 40px #03bcf4,
                    0 0 80px #03bcf4,
                    0 0 160px #03bcf4;
            }
        }
    </style>
</head>

<body>
    <h2 contenteditable="true">Text</h2>
</body>

</html>

 

posted @ 2021-05-06 23:13  {hunter}ZY  阅读(193)  评论(0)    收藏  举报