仿QQ空间五彩字体
in 前端 with 0 comment

仿QQ空间五彩字体

in 前端 with 0 comment

效果图如下:(字体颜色的变更交替是动态的)

批注 2019-08-30 105917.png

<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一下。

参考

效果发源地:小程序新 Canvas 接口公测
css的background-clip:text神奇用法

Comments are closed.