流光字体css3

最新推荐文章于 2024-08-31 17:56:43 发布

赵啸林

最新推荐文章于 2024-08-31 17:56:43 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css3 css javascript

本文链接：https://blog.csdn.net/weixin_49295874/article/details/129061620

css 专栏收录该内容

24 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      ._borderWrap {
        width: 180px;
        height: 150px;
      }
      ._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%;
        background-clip: text;
        -webkit-background-clip: text;
        animation: word 5s linear infinite;
      }
      @keyframes word {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -100% 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="_borderWrap">
      <div class="_border">你的名字</div>
    </div>
  </body>
</html>