一站式百度SEO排名优化!-找老刘SEO 低投入,高转化,精益求精、一丝不苟:旨在提供更好的SEO服务!

首页>>网站建设

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

首页 2022-04-09 网站建设 117 ℃ 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制作的流光溢彩的文字效果咯。

搜索
分类
热门标签
  • 首页
  • 电话
  • QQ
  • 联系老刘手机
    135-2401-7402
    联系老刘微信
    扫描微信二维码