HTML+CSS:流光文字特效

先上效果:

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">
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值