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

这篇具有很好参考价值的文章主要介绍了记录-css实现交融文字效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

记录-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时正常显示的效果

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

小于正常值的效果

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

我们可以为节点加上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文字变得模糊

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

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

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

这样就有了一些圆润的边缘,最后我们将对应的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实现交融文字效果文章来源地址https://www.toymoban.com/news/detail-410693.html

到了这里,关于记录-css实现交融文字效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3实现的4种3D文字效果

    本文将介绍css3实现的4种3D文字效果。代码很简单,效果很震撼: 代码实现 html: css: 代码解释 1、3D文字效果运用原理就是像Photoshop一样,我们在文字的下方或上方复制了多个图层,并把每一个层向左上或右下方向移动一个1px距离,从而制作出3D效果。同时我们层数越多,其

    2024年02月11日
    浏览(69)
  • 使用css3如何实现一个文字打印效果

    在很多网站首页介绍页里,为了吸引用户,暂留更长时间,使用了一些css3动画的 文字打印.gif 想要实现这个动画,改变元素的宽度,结合动画css3关键帧实现 animation 动画通过设置多个节点来精确控制一个或者一组动画,常用来实现复杂的动画效果; 相对过渡动画, animation 动画可以

    2024年02月16日
    浏览(88)
  • CSS3 实现边框圆角渐变色&&渐变文字效果

      background-clip: text; 是CSS中的一个属性,用于指定背景图片或颜色的裁剪方式,裁剪的区域是文本的轮廓。具体来说,就是将背景图片或颜色限制在文本的轮廓内,而不是整个元素的范围内。这个属性通常用于创建一些特殊的文本效果,比如文字渐变、文字填充等。  参考:

    2024年02月16日
    浏览(51)
  • CSS中如何实现文字描边效果(Text Stroke)?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月09日
    浏览(51)
  • CSS中如何实现文字阴影效果(text-shadow)?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月11日
    浏览(83)
  • CSS中如何实现文字渐变色效果(Text Gradient Color)?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月10日
    浏览(66)
  • 两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果

    我们知道浏览器页面上的文字正常情况下我们是可以双击选中、或者单击鼠标横向拖动也能选中的,选中以后可以右击出现面板然后去复制什么的。但是有的时候,这种效果我们并不想要的,比如用户点快了的时候,所以我们需要禁用这种效果,本文记录一下禁用选中效果的

    2024年02月11日
    浏览(68)
  • 微软文字转语音不能试用了,分享三个方法给大家!

    最近很多小伙伴告诉我,微软文字转语音不能在线试用了,这是因为微软关闭了官方的使用页面,所以现在不能直接使用微软的网页版进行文字转语音了。 那么我们还有没有更好的方法去“白嫖”微软的文字转语音呢? 答案是肯定的,今天再给大家分享三个可以白嫖微软文

    2024年02月11日
    浏览(45)
  • 免费使用微软Azure进行文字转语音!分享三个方法给大家!

    作为一个短视频制作的爱好者,使用了非常多的文字转语音工具,其中最接近真人发声的还是微软的文字转语音工具,这也是目前非常多的自媒体制作者在使用的文字转语音工具,目前有21种发声角色可以选择,而且可以自己挑整语速以及音调等功能,所以今天就给大家分享

    2024年02月01日
    浏览(48)
  • CSS几种常见的文字动态效果

    前言:要实现CSS字体动态效果,就要用到CSS3的animation和@keyframes属性。关于这两个属性就不过多的解释了,在我上上上篇文章有过讲解 在目录的‘动画和过滤样式’ 进入 ,想了解的,可以点击进入,找到目录十。 文字颜色闪烁效果 文字逐字出现效果 文字放大缩小效果 文字

    2024年02月07日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包