前言

这个教程可以帮助很多站长写文章时，重要词语/文本进行特殊标记,用红色或其他色彩有点单一

我之前也发布一篇

网站使用CSS和JS两种方法实现颜色渐变文字效果代码[网站教程]

11个月前

0849

效果

紧急通知

教程

将以下代码添加到你的自定义html。

代码

红色渐变

html代码

<link rel="stylesheet" type="text/css" href="https://cdn.wpon.cn/cssjc/redwz.css">
<div class="wpon">我的颜色是红色</div>

如果想调用自己的css代码把下面的css代码放到你网站，上面链接改成你的
CSS代码

.wpon{
  font-size: 16px;
  background-image: -webkit-linear-gradient(90deg, #DC0C0C, #EF5353 25%, #DC0C0C 50%, #EF5353 75%, #DC0C0C);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-size: 100% 600%;
  animation: wpon 10s linear infinite;
}

@keyframes wpon {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 -300%;
  }
}

蓝色渐变

html代码

<link rel="stylesheet" type="text/css" href="https://cdn.wpon.cn/cssjc/bluewz.css">
<div class="wpon">我的颜色是蓝色</div>

如果想调用自己的css代码把下面的css代码放到你网站，上面链接改成你的CSS代码
CSS代码

.wpon{
  font-size: 16px;
  background-image: -webkit-linear-gradient(90deg, #0060FD, #5C92EB 25%, #0060FD 50%, #5C92EB 75%, #0060FD);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-size: 100% 600%;
  animation: wpon 10s linear infinite;
}

@keyframes wpon {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 -300%;
  }
}

黄色渐变

html代码

<link rel="stylesheet" type="text/css" href="https://cdn.wpon.cn/cssjc/yellowwz.css">
<div class="wpon">我的颜色是黄色</div>

如果想调用自己的css代码把下面的css代码放到你网站，上面链接改成你的CSS代码
CSS代码

.wpon{
  font-size: 16px;
  background-image: -webkit-linear-gradient(90deg, #F3E020, #EBDF6C 25%, #F3E020 50%, #EBDF6C 75%, #F3E020);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-size: 100% 600%;
  animation: wpon 10s linear infinite;
}

@keyframes wpon {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 -300%;
  }
}

绿色渐变

html代码

<link rel="stylesheet" type="text/css" href="https://cdn.wpon.cn/cssjc/greenwz.css">
<div class="wpon">我的颜色是绿色</div>

如果想调用自己的css代码把下面的css代码放到你网站，上面链接改成你的CSS代码
CSS代码

.wpon{
  font-size: 16px;
  background-image: -webkit-linear-gradient(90deg, #1EF538, #6EEE7E 25%, #1EF538 50%, #6EEE7E 75%, #1EF538);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-size: 100% 600%;
  animation: wpon 10s linear infinite;
}

@keyframes wpon {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 -300%;
  }
}

粉色渐变

html

<link rel="stylesheet" type="text/css" href="https://cdn.wpon.cn/cssjc/wenzi.css">
<div class="wpon">我的颜色是粉色/div>

如果想调用自己的css代码把下面的css代码放到你网站，上面链接改成你的CSS代码
CSS代码

.wpon{
  font-size: 16px;
  background-image: -webkit-linear-gradient(90deg, #4e17df, #fb6bea 25%, #4e17df 50%, #fb6bea 75%, #4e17df);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-size: 100% 600%;
  animation: wpon 10s linear infinite;
}

@keyframes wpon {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 -300%;
  }
}

文章版权声明 1、本网站名称：傲天的小窝
2、本站永久网址：https://www.atwlb.cn/
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ2214045929进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END