教程
代码
1.红色渐变
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%;
}
}
2.蓝色渐变
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%;
}
}
3.黄色渐变
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%;
}
}
4.绿色渐变
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%;
}
}
5.粉色渐变
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%;
}
}
您阅读这篇文章共花了: 0小时00分00秒
THE END
暂无评论内容