CSS实现炫彩文字和滚动变色动画

最新推荐文章于 2024-04-30 09:57:30 发布

G018_star sky♬

最新推荐文章于 2024-04-30 09:57:30 发布

阅读量831

点赞数

分类专栏： CSS 文章标签： css 动画 css3

本文链接：https://blog.csdn.net/qq_42526440/article/details/124531075

版权

CSS 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!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>Multi-color Text</title>
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");

    :root {
      --color1: #01579B;
      --color2: #00838F;
      --color3: #FFD600;
      --color4: #FF4081;
      --color5: #F44336;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      height: 100vh;
      overflow: hidden;
      background-color: #151515;
      display: grid;
      place-items: center;
    }

    h1 {
      color: #fff;
      text-transform: uppercase;
      word-spacing: 100vw;
      width: min-content;
      text-align: center;
      font-family: "Luckiest Guy", cursive;
      font-size: 15vh;
      line-height: 100%;
      background: linear-gradient(225deg,
          var(--color1) 0%, var(--color1) 9%,
          transparent 9%, transparent 10%,
          var(--color2) 10%, var(--color2) 19%,
          transparent 19%, transparent 20%,
          var(--color3) 20%, var(--color3) 29%,
          transparent 29%, transparent 30%,
          var(--color4) 30%, var(--color4) 39%,
          transparent 39%, transparent 40%,
          var(--color5) 40%, var(--color5) 49%,
          transparent 49%, transparent 50%,
          var(--color1) 50%, var(--color1) 59%,
          transparent 59%, transparent 60%,
          var(--color2) 60%, var(--color2) 69%,
          transparent 69%, transparent 70%,
          var(--color3) 70%, var(--color3) 79%,
          transparent 79%, transparent 80%,
          var(--color4) 80%, var(--color4) 89%,
          transparent 89%, transparent 90%,
          var(--color5) 90%, var(--color5) 99%,
          transparent 99%);
      background-clip: text;
      -webkit-background-clip: text;
      background-size: 200% 200%;
      color: transparent;
      animation: move 4s linear infinite;
    }

    @keyframes move {
      0% {
        background-position: 0px 100%;
      }

      100% {
        background-position: 100% 0px;
      }
    }
  </style>
</head>

<body>
  <h1 contenteditable="true">
    multi color text with css
  </h1>
</body>

</html>

页面如下:
在这里插入图片描述

G018_star sky♬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS实现炫彩文字和滚动变色动画

<!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>Multi-colo
复制链接

扫一扫