仿QQ空间五彩字体
- 2019/08/30
- 0阅读
效果图如下：（字体颜色的变更交替是动态的）
1 | <div style="animation: dotLeft 1s ease-in-out infinite;width: fit-content;background-image: -webkit-linear-gradient(left, red, #00cc88);-webkit-background-clip: text;-webkit-text-fill-color: transparent;display:inline-block;">已经支持了，官方有个案例</div> |
animation: dotLeft 1s ease-in-out infinite;
css的动画属性设置，这个不设置的话颜色变幻就不会动
background-image: -webkit-linear-gradient(left, red, #00cc88);
背景色/图设置。图中是从左至右的渐变，红>绿
-webkit-background-clip: text
这个属性比较有意思，可以理解为对背景做了裁剪，只保留了文字部分的背景。
-webkit-text-fill-color: transparent
设置文字的背景色为透明
这样就实现了文字渐变色变换的效果，这里战略性mark一下。
参考
仿QQ空间五彩字体
作者：有点东西
链接： https://www.youdiandongxi.com/article/font-linear-gradient.html
协议：本文采用 CC BY-NC-SA 4.0 隐私协议，转载请注明出处！
