先上效果:
HTML+CSS:流光文字特效
解决思路:
之前写过一篇《会发光的边框》,与这一篇的本质是一样的。都是通过多张图层堆叠,利用色差,模糊度,使文字边框看起来像发光一样。最后使用CSS,为此添加动画效果。
重点难点:
mix-blend-mode属性。
现在的我也只知道使用这个属性的值,能产生什么效果,但是对于为什么会这样,我是一头雾水。例如:当mix-blend-mode的属性值为difference时,原本白色的文字会变成黑色,隐身在背景之中。如果为他们添加模糊度,就可以得到带有白色边框的文字。如图:
再使用一张彩色渐变的图层,并且mix-blend-mode的值为multiply。我们得到的白色边框的文字就会变成彩色的。如图:
最后一个难点就是: background-image:radial-gradient(circle,white,black 30%);黑白渐变,再加上移动。我们既可以得到我们想要的流光效果。
HTML代码演示:
<body>
<div>
<h1 class="txt">美香一家</h1>
<h1 class="txt2">