最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

速讯:记录-css实现交融文字效果

来源:博客园


(资料图片)

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

CSS是有魔法的,我们今天来实现一个CSS的动画效果,只需要几行代码就可以搞定。

第一步、我们要将一行文字从中间展开

                Document        
hello world

以上是基础代码结构,通过调整letter-spacing的值,我们可以控制他的展开与收起。值越小为负数时文字就可以挤在一起,越大文字间距就越大。

默认值为0时正常显示的效果

小于正常值的效果

我们可以为节点加上keyframes动画,此时letter-spacing属性转由keyframes控制可以达到自动展开文字的效果

.text{  font-size: 100px;  color: #fff;  animation: showup 3s forwards;}@keyframes showup {  from{    letter-spacing: -50px;  }  to{    letter-spacing: 10px;  }}

第二步、我们需要设置文字融合在一起的效果

先给文本节点设置filter blur文字变得模糊

学过ps的就会知道,当给图片加上较高的对比度的时候,就会导致黑的部分越黑,白的部分越白。我们给父节点加上filter,设置contrast(30),可以获得如下效果

这样就有了一些圆润的边缘,最后我们将对应的css属性交给keyframes控制,就可以达到最终的效果

@keyframes showup {    from{        letter-spacing: -50px;/* 新增 */        filter: blur(10px);    }    to{        letter-spacing: 10px;        /* 新增 */        filter: blur(2px);    }}

完整代码如下:

                Document        
hello world

本文转载于:

https://juejin.cn/post/7220696133730828344

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

关键词: