本文主要是介绍css3实现炫彩字体,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
这个字体颜色是动态变化的,直接上代码
<!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;
:以前以为不设置边框颜色,默认是黑色,结果发现是默认和字体颜色一样
这篇关于css3实现炫彩字体的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!