阅读 290

有趣的前端css特效-波浪文字

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

有趣的前端css特效-波浪文字

刚看到一个很有趣的gif图片,是一段波浪特效颜色的文字图片。突然有了一个想法,用纯css来实现这个效果。成品gif如下。

1.gif

1.首先,考虑将文字上的波浪特效想想成两个不同旋转的圆,通过设置border-radius 将其设置为不规则的圆。

主要代码如下


p::before,

p::after {

mix-blend-mode: screen;

content: "";

position: absolute;

border-radius: 45% 48% 43% 47%;

background: rgba(3, 169, 244, .85);

}

p::after {

border-radius: 43% 47% 44% 48%;

}

复制代码

此时则拥有了两个形状不重合的不规则圆。

39630765-8DE3-48DF-B2B2-02B04F293BA3.png

给圆在加上动画,再将两个圆定位重合,则得到了波浪的基础原型


p::before,

p::after {

animation: rotate 10s infinite linear;

}

p::after {

animation: rotate 10s infinite .5s linear;

}

复制代码

DEB7F95D-FEC6-454F-8DD9-6E77FE766DE5.png

2.加上文字看看效果

将p标签中加上对应的文字后调整一下波浪圆圈的大小。得到的效果如下

E8303B40-FD2E-4540-BAD8-3F289B4342F9.png 和我们预期的效果还差一些。那么进行下一步

3.隐藏超出文字部分的波浪图

p{overflow: hidden;}

5E80A031-7458-4D73-B4F9-34C9676A0D8B.png

如此波浪图与文字宽高一样了,但是还需要将圆超出文字的部分处理掉。这里用到一个很重要的css属性叫 mix-blend-mode 直译过来的意思是混合模式,描述元素的内容与元素的直系父元素的内容和元素的背景如何混合。

新增如下css


p::before,

p::after {

mix-blend-mode: screen;

}

复制代码

则得到效果图为:

68523A7E-773C-4965-833A-2ACB51A3C8E1.png

至此,通过css混合模式的特性,得到一个波浪文字特效的纯css代码就巧妙的完成了。

混合模式的基本用法详见教程,感兴趣的小伙伴可以自己去尝试各种不同的模式。


css可以完成很多特效,将持续更新其他有趣css特效代码。

文章分类
前端
文章标签