这个教程可以帮助很多站长写文章时,重要词语/文本进行特殊标记,用红色或其他色彩有点单一
效果
紧急通知
教程
代码
红色渐变
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%; } }
© 版权声明
本站网站名称:追月流涟教程网
本站永久网址:https://www.zyds666.cn
网站侵权说明:
本站采用 CC BY-NC-SA 4.0 国际许可协议 进行许可,转载或引用本站文章应遵循相同协议。
1、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ进行删除处理。
2、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
3、本站禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
4、本站资源大多存储在云盘,如发现链接失效,请联系我们将会第一时间更新。
站长邮箱:abcdefghijklm1211@qq.com
1、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ进行删除处理。
2、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
3、本站禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
4、本站资源大多存储在云盘,如发现链接失效,请联系我们将会第一时间更新。
站长邮箱:abcdefghijklm1211@qq.com
还没有评论,来说两句吧...