艾Q网

标题: css3实现动态变化的炫彩字体 [打印本页]

作者: admin 时间: 2024-4-22 09:00
标题: 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;:以前以为不设置边框颜色，默认是黑色，结果发现是默认和字体颜色一样

欢迎光临艾Q网 (http://js.iqi123.com/bbs/)