文字color颜色渐变（可一直变换） - 代码篇

最新推荐文章于 2024-06-27 17:17:58 发布

草巾冒小子

最新推荐文章于 2024-06-27 17:17:58 发布

阅读量4.2k

点赞数 2

分类专栏： CSS 3

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/105415273

版权

CSS 3 专栏收录该内容

60 篇文章 3 订阅

订阅专栏

文字color颜色渐变（可一直变换） - 代码篇

一、应用场景 · 举例：

https://www.iconfont.cn/ 站内的【字体图标】【如下图1所示】
某些客户要求的 “炫酷拽”的宣传推广页面的文字特效
等等

应用效果图 · 截图示下：

在这里插入图片描述

二、html 案例：（可一直变换）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是蚊子</title>
<style>
.site__title {
    color: #abeaf7;
    background-image: -webkit-linear-gradient(90deg, #abeaf7, #f41392);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: change 5s infinite linear;
  }
@-webkit-keyframes change {
    from {
      -webkit-filter: hue-rotate(0deg);
    }
    to {
      -webkit-filter: hue-rotate(-360deg);
    }
}
</style>
</head>
<body>
	<h1 class="site__title">我是蚊子</h1>
</body>
</html>

说明：

上述代码可以一直变换颜色，可以根据场景需要，自动取舍代码。

以上就是关于” 文字color颜色渐变（可一直变换） - 代码篇 “ 的全部内容。

草巾冒小子

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
文字color颜色渐变（可一直变换） - 代码篇

文字color颜色渐变（可一直变换） - 代码篇一、应用场景 · 举例：https://www.iconfont.cn/ 站内的【字体图标】【如下图1所示】某些客户要求的 “炫酷拽”的宣传推广页面的文字特效等等应用效果图 · 截图示下：二、html 案例：（可一直变换）<!DOCTYPE html><html><head>&l...
复制链接

扫一扫

专栏目录