<bdo id="0ekax"></bdo>

    <td id="0ekax"><del id="0ekax"></del></td>

    <p id="0ekax"></p>
  1. <track id="0ekax"><strike id="0ekax"></strike></track>

    一站式百度SEO排名優化!-找老劉SEO 低投入,高轉化,精益求精、一絲不茍:旨在提供更好的SEO服務!

    首頁>>前端開發

    用CSS做一個很酷流光溢彩的文字特效

    首頁 2022-04-09 前端開發 774 ℃Tags:


    網上看到一個大佬的文字特效很酷,直接轉載下來:

    動畫.gif


    實現代碼

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>這個文字特效很酷啊</title>

        <style>

            body{ background: #222;}

            *{margin: 0;padding: 0;}

            ._borderWrap{

                width: 580px;

                height: 150px;

                position: absolute;

                left: 23%;

                top: 25%;

            }

            ._border{

                line-height: 145px;

                text-align: center;

                font-size: 40px;

                font-weight: bolder;

                -webkit-text-fill-color: transparent;

                background-image:  -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));

                background-size: 200%,100%;

                -webkit-background-clip: text;

                -webkit-animation: word 0.5s linear infinite ;

            }

            @keyframes word {

                0%{background-position: 0 0}

                100%{background-position: -100% 0}

            }

        </style>

    </head>

    <body>

            <div>

                <div>這個文字特效很酷啊</div>

            </div>

    </body>

    </html>

    將上面的代碼復制,然后保存在記事本中,將擴展名修改為.html,使用瀏覽器打開即可看到CSS制作的流光溢彩的文字效果咯。

    搜索
    分類
    熱門標簽
  2. 首頁
  3. 電話
  4. QQ
  5. ?
    聯系老劉手機
    1043025812
    聯系老劉微信
    掃描微信二維碼
    性欧美video_zzijzzij亚洲日本少妇_一级毛片和美国久久久久_久久AV喷潮久久AV高