css3实现炫彩字体

news/2024/11/14 15:35:15/文章来源:https://blog.csdn.net/lth002/article/details/136132577

在这里插入图片描述
这个字体颜色是动态变化的，直接上代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>@keyframes myfirst {0% {background-position: 0;}100% {background-position: 200%;}}.box {width: 200px;height: 100px;border: 1px solid;background-image: -webkit-linear-gradient(left,#66ffff 10%,#cc00ff 20%,blue 100%);animation: myfirst 1s infinite;background-clip: text;text-align: center;font-size: 30px;line-height: 100px;-webkit-text-fill-color: transparent;background-size: 200%;}</style></head><body><div class="box">炫彩字体</div></body>
</html>

background-clip:背景裁剪，有哪些值自行百度；
-webkit-text-fill-color:一定要加-webkit，文字颜色填充，效果和color差不多；
突然发现的小知识点：
border: 1px solid;:以前以为不设置边框颜色，默认是黑色，结果发现是默认和字体颜色一样

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/258342.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！