DDY-渐变文字

最新推荐文章于 2024-06-12 20:49:37 发布

发渐稀

最新推荐文章于 2024-06-12 20:49:37 发布

阅读量59

点赞数

分类专栏：资源文章标签： html5 css

本文链接：https://blog.csdn.net/qq_64760783/article/details/131565290

版权

资源专栏收录该内容

8 篇文章 0 订阅

订阅专栏

渐变文字效果

效果图：颜色会律动

HTML代码

<!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>渐变文字</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>我轻轻的招手，作别西天的云彩。</p>
</body>
</html>

CSS代码

*{
  padding: 0;
  margin: 0;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

p{
  font-size: 90px;
  font-weight: 700;
  font-family: '思源黑体 CN';
  background-image:
    linear-gradient(90deg,
    #673ab7,
    #e91e63);
  background-clip: text;
  -webkit-background-clip: text;
  /* 这次的这句和以往不一样 */
  /* 以往是考虑低版本浏览器 */
  /* 这次就连最新版Chrome和Safari都需要 */
  /* 注意是background-clip: text;需要 */
  /* 如果是： content-box啊之类的就没这么苛刻的 */
  /* -webkit-text-fill-color: transparent; */
  color: transparent;
  /* 这个属性的-webkit-前缀也比较特殊 */
  /* 寻常的-webkit-表示的是Chrome和Safari的私有属性 */
  /* 但是它却声明了所有的（除了那位浏览器） */
  background-image:
  linear-gradient(90deg, 
    rgb(255, 167, 69),
    rgb(254, 134, 159),
    rgb(239, 122, 200),
    rgb(160, 131, 237),
    rgb(67, 174, 255),
    rgb(160, 131, 237),
    rgb(239, 122, 200),
    rgb(254, 134, 159),
    rgb(255, 167, 69));
  background-size: 200%;
}

p{
  -webkit-animation: streamer 2s linear infinite;
          animation: streamer 2s linear infinite;
}

@-webkit-keyframes streamer {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 200%;
  }
}

@keyframes streamer {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 200%;
  }
}
r {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 200%;
  }
}