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

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        body{

            background: #000;

        }

        .container{

            margin-top: 50px;

            text-align: center;

            background-color: #000;

            filter: contrast(30);

        }

        .text{

            font-size: 100px;

            color: #fff;

            /* 第一步、如何从中间展开 */

            letter-spacing: 0px;

        }

    </style>

</head>

<body>

    <div class="container">

        <span class="text">hello world</span>

    </div>

</body>

</html>

以上是基础代码结构，通过调整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);

    }

}

完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        body{

            background: #000;

        }

        .container{

            margin-top: 50px;

            text-align: center;

            background-color: #000;

            filter: contrast(30);

        }

        .text{

            font-size: 100px;

            color: #fff;

            /* 第一步、如何从中间展开 */

            /* letter-spacing: 0px; */

            animation: showup 3s forwards;

        }

        @keyframes showup {

            from{

                letter-spacing: -50px;

                filter: blur(10px);

            }

            to{

                letter-spacing: 10px;

                filter: blur(2px);

            }

        }

    </style>

</head>

<body>

    <div class="container">

        <span class="text">hello world</span>

    </div>

</body>

</html>

本文转载于:

https://juejin.cn/post/7220696133730828344

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

记录-css实现交融文字效果的更多相关文章

UGUI 文字效果实现（Shadow\Gradient\Outline）
NGUI直接在UILabel组件中接入了Shadow.Gradient和outline选项,但在UGUI中是通过另外的组件单独提供,比如outline.shader等.这篇文章主要记录这几个文字效果实 ...
纯CSS3文字效果推荐
之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究几款文字效果,主要利用text-shadow.webkit内核的 ...
css文字效果（文字剪贴蒙版，text-shodow的应用，文字排版等…）
.katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...
CSS Gradient文字效果
你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< ...
精通CSS+DIV网页样式与布局--CSS文字效果
上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...
css实现中间文字，两边横线效果
1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式. 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值. ...
css鼠标滑过出现文字效果
模仿淘宝上鼠标移动到商品图片时,出现的文字效果. 1.效果图鼠标移动到粉红色的区域,则出现黄色部分. 2.代码 <!DOCTYPE ...
CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码:  <div id="moml"> <div style="text-al ...
CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现
前言首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...
CSS3下的渐变文字效果实现
如下,第一种方法已实践一.方法一:借助mask-image属性可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...

随机推荐

C# 二十年语法变迁之 C# 7参考
C# 二十年语法变迁之 C# 7参考 https://benbowen.blog/post/two_decades_of_csharp_iii/ 自从 C# 于 2000 年推出以来,该语言的规模已经 ...
OI中的一些数学小技巧
在OI比赛中,如果能够灵活地运用一些数学小技巧,是能够很好地优化计算的时间和正确性的. 既然说了是小技巧,那么这些指的都是一些技巧,一般是不会单独成题的. 本博客或会随着作者的见识而更新 Better ...
NC20240 [SCOI2005]互不侵犯KING
题目链接题目题目描述在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案. 国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 输入描述只有一行 ...
在PWM控制下的直流有刷电机性能优化
结论为了避免各位浪费时间, 先说结论: 选择合适的电机驱动模式和PWM频率, 能大幅提升直流电机的性能和可控性, 在常见的48:1减速电机上, 使用慢衰减模式和低于100Hz的PWM频率, 能达到最 ...
建立DNS隧道绕过校园网认证
建立DNS隧道绕过校园网认证因为之前在本科的时候破解过校园网三次,主要就是利用其业务逻辑上的漏洞.53端口未过滤包.重放攻击的手段,然后就是一个博弈的过程,这三次加起来用了大概有一年的时间就被完全堵 ...
Vue中虚拟DOM的理解
Vue中虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲染操作使这 ...
《深入理解Java虚拟机》(八) 记录一次OOM问题分析实战
目录一.问题分析思路二.主要问题概述以及分析 1.相关操作 2.主要问题现象 3.初步分析问题三.相关工具介绍四.实际问题快照分析 1.通过Memory查看老年代内存占用情况 2.选择Live ...
linux和unix中的IO模型总结
高性能网络IO编程模型一.I/O模型简介在一个 linux 操作系统中,一般分为用户空间和内核空间. 用户空间一般就是我们进行应用程序编程的地方. 内核空间就是 linux 操作系统自己运行的一些 ...
centos7.5 hadoop NAT 静态IP网络环境搭建
1 设置 VMware 网络环境 1. 选择VMNet8 并将子网IP 修改为 192.168.10.0,保证集群ip都在这个网段下 2. 选择NAT 设置,配置NAT的网关为 192.168.10. ...
[BUUCTF][Web][ACTF2020 新生赛]Exec 1
打开靶机对应url 显示可以输出ip 来进行ping操作尝试试一下是否有命令注入的可能 127.0.0.1|ls 果然可以,输出结果 index.php PING 127.0.0.1 (127.0. ...