霓虹氖灯文字效果

<!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>demo</title>
    <style>
        body {
            background: rgb(38, 196, 162);
            text-align: center;
        }

        p {
            display: inline;
            font-family: "Lobster";
            text-align: center;
            font-size: 20vmin;
            line-height: 30vmin;
            color: #fff;
            cursor: pointer;
        }

        p:hover {
            color: #fff;
        }

        .pink {
            filter: brightness(110%);
            text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #e91e63, 0 0 35px #e91e63, 0 0 40px #e91e63, 0 0 50px #e91e63, 0 0 75px #e91e63;
            animation: pink 1.5s ease-in-out infinite alternate;
        }

        .orange {
            color: #ff5722;
        }

        .orange:hover {
            animation: orange 1.5s ease-in-out infinite alternate;
        }

        .yellow {
            color: #ffeb3b;
        }

        .yellow:hover {
            animation: yellow 1.5s ease-in-out infinite alternate;
        }

        @keyframes pink {
            to {
                text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #e91e63, 0 0 70px #e91e63, 0 0 80px #e91e63, 0 0 100px #e91e63, 0 0 150px #e91e63;
            }
        }

        @keyframes orange {
            to {
                text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff5722, 0 0 70px #ff5722, 0 0 80px #ff5722, 0 0 100px #ff5722, 0 0 150px #ff5722;
            }

            from {
                filter: brightness(110%);
                text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff5722, 0 0 35px #ff5722, 0 0 40px #ff5722, 0 0 50px #ff5722, 0 0 75px #ff5722;
            }
        }

        @keyframes yellow {
            to {
                text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ffeb3b, 0 0 70px #ffeb3b, 0 0 80px #ffeb3b, 0 0 100px #ffeb3b, 0 0 150px #ffeb3b;
            }

            from {
                filter: brightness(110%);
                text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ffeb3b, 0 0 35px #ffeb3b, 0 0 40px #ffeb3b, 0 0 50px #ffeb3b, 0 0 75px #ffeb3b;
            }
        }
    </style>
</head>

<body>
    <div>
        <p class="pink">PINK</p>
    </div>
    <div>
        <p class="orange">Box-Shadow</p>
    </div>
    <div>
        <p class="yellow">YELLOW</p>
    </div>
</body>

</html>

 

上一篇:设置css阴影和取消css阴影


下一篇:使用VNC(ubuntu 与 windows 互连 )