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

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实现交融文字效果的更多相关文章

  1. UGUI 文字效果实现（Shadow\Gradient\Outline）

    NGUI直接在UILabel组件中接入了Shadow.Gradient和outline选项,但在UGUI中是通过另外的组件单独提供,比如outline.shader等.这篇文章主要记录这几个文字效果实 ...

  2. 纯CSS3文字效果推荐

    之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究几款文字效果,主要利用text-shadow.webkit内核的 ...

  3. css文字效果（文字剪贴蒙版，text-shodow的应用，文字排版等…）

    .katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...

  4. CSS Gradient文字效果

    你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< ...

  5. 精通CSS+DIV网页样式与布局--CSS文字效果

    上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...

  6. css实现中间文字，两边横线效果

    1. vertical-align属性实现效果: vertical-align 属性设置元素的垂直对齐方式. 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值. ...

  7. css鼠标滑过出现文字效果

    模仿淘宝上鼠标移动到商品图片时,出现的文字效果. 1.效果图                                鼠标移动到粉红色的区域,则出现黄色部分. 2.代码 <!DOCTYPE ...

  8. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  9. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  10. CSS3下的渐变文字效果实现

    如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...

随机推荐

  1. 一文看懂"async"和“await”关键词是如何简化了C#中多线程的开发过程

    一文看懂"async"和"await"关键词是如何简化了C#中多线程的开发过程 当我们使用需要长时间运行的方法(即,用于读取大文件或从网络下载大量资源)时,在同 ...

  2. JS leetcode 买卖股票的最佳时机 题解分析，我离职了。

    壹 ❀ 引 昨天下班后,还是找经理提出了辞职,没有犹豫的裸辞,今天与人事的对话不小心被后台的同事听到,一下在公司传开了,下午我与同事们多人对线,被他们的消息轰炸....没错,我真的要走了. 因为什么原 ...

  3. NC15976 小C的周末

    题目链接 题目 题目描述 愉快的周末到了,小C和他的N-1个朋友买了M个游戏,游戏编号从1~M.每个游戏都是多人游戏,他们打算周末一起打游戏. 小C的每个朋友都决定好了要玩哪一款游戏(会有一组人打同一 ...

  4. IPFS 添加和管理文件

    IPFS的文件有不同的模式 默认模式 默认模式下, 文件会被解析并存入blocks, 同时文件的结构被存入filestore, 因为IPFS是按内容寻址的文件系统, 在添加时最外层的目录名或文件名信息 ...

  5. v-html可能导致的问题

    v-html可能导致的问题 Vue中的v-html指令用以更新元素的innerHTML,其内容按普通HTML插入,不会作为Vue模板进行编译,如果试图使用v-html组合模板,可以重新考虑是否通过使用 ...

  6. 微信小程序引入iconfont实现添加自定义颜色图标

    说明 最近搞微信小程序,需要添加一些图标,发现引入iconfont还是有几个步骤,就记录下来分享以下. 以下配置方法支持自定义颜色的. 操作步骤 1. 在iconfont网站挑选自己需要的图标,添加到 ...

  7. RHEL8重置root用户密码步骤

    要先确定是否为RHEL 8系统. [root@zhangsan ~]# cat /etc/redhat-release Red Hat Enterprise Linux release 8.0 (Oo ...

  8. gin中间件&控制器

    中间件 Gin 框架允许开发者在处理请求的过程中,加入用户自己的钩子(Hook)函数.这个钩子函数就叫中间件,中间件适合处理一些公共的业务逻辑,比如登录认证.权限校验.数据分页.记录日志.耗时统计等. ...

  9. 【Azure Redis 缓存 Azure Cache For Redis】Azure Redis删除 TLS 1.0 和 1.1的计划及问题

    问题描述 Azure Redis 正式关闭TLS1.0和1.1关闭的时间 根据文档描述Azure Redis阶段2我们将停止支持 TLS 1.1 和 TLS 1.0,暂时计划 2020 年 12 月 ...

  10. 【Azure API 管理】APIM服务资源删除后，为什么不能马上创建相同名称的APIM服务呢？

    问题描述 使用Azure APIM服务,在删除旧资源准备新建相同名称的新APIM服务时,尝试多次都是出现"指定的服务名称已正在使用"错误.但实际上同名称的服务已经被删除.为什么多次 ...