zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    elasticsearch客户端连接选择
    logstash5.x配置
    git操作
    Linux的crontab
    让MySQL支持中文
    Python装饰器(decorator)
    Python类的探讨
    Python对象(译)
    Python基础-作用域和命名空间(Scope and Namespace)
    Python输入输出(IO)
  • 原文地址:https://www.cnblogs.com/zhaoyids/p/14905366.html
Copyright © 2011-2022 走看看