• 技术文章 >web前端 >前端问答

    整理分享5种纯CSS实现炫酷的文字效果

    长期闲置长期闲置2022-01-13 18:19:52转载88
    本篇文章给大家带来了5中非常炫酷的文字效果,这些效果全是利用css来实现的,希望对大家有帮助。

    CSS是一门很特殊的语言,你认为CSS只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能。

    一.渐变文字效果

    +1.gif

    该效果主要利用background-clip:text配合color实现渐变文字效果 首先了解background-clip: text;的意思:以盒子内的文字作为裁剪区域向外裁剪,文字之外的区域都将被裁剪掉。

    给文本容器设置渐变背景

     background: linear-gradient(90deg, black 0%, white 50%, black 100%);

    设置webkit-background-clip属性,以文字作为裁剪区域向外裁剪

    -webkit-background-clip: text;
            background-clip: text;

    通过-webkit-animation属性设置动画,即可实现上述效果

    -webkit-animation: shining 3s linear infinite;
            animation: shining 3s linear infinite;
    @-webkit-keyframes shining {
      from {
        background-position: -500%;
      }
      to {
        background-position: 500%;
      }
    }
    @keyframes shining {
      from {
        background-position: -500%;
      }
      to {
        background-position: 500%;
      }
    }

    样式引用

    <html>
        <link rel="stylesheet" href="./css/neno-text-style.css">
        <body>
            <p class="neon">前端实验室</p>
        </body>
    </html>

    二.彩虹文字效果(跑马灯)

    +2.gif

    .text {
        letter-spacing: 0.2rem;
        font-size: 1.5rem;
        background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
    }

    该效果也是利用background-clip:text和线性渐变属性linear-gradient实现,通过设置区域颜色值实现了彩虹文字的效果。

    动态彩虹文字需要设置-webkit-animation属性

    -webkit-animation: maskedAnimation 4s infinite linear;
    @keyframes maskedAnimation {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -100% 0;
        }
    }

    CSS样式

    .rainbow {
        letter-spacing: 0.2rem;
        font-size: 1.2rem;
        text-transform: uppercase;
    }
    .rainbow span {
        animation: rainbow 50s alternate infinite forwards;
    }
    @keyframes rainbow {
        0% {
            color: #efc68f;
        }
        ...
        100% {
            color: #8fefed;
        }
    }
    <html>
        <head>
            <link rel="stylesheet" href="./css/rainbow-color-text-style.css">
        </head>
        <body>
            <div class="text">【前端实验室】分享前端最新、最实用前端技术</div>
        </body>
    </html>

    三.发光文字效果

    +3.gif

    该效果主要利用text-shadow属性实现。text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。

    .neon {
        color: #cce7f8;
        font-size: 2.5rem;
        -webkit-animation: shining 0.5s alternate infinite;
        animation: shining 0.5s alternate infinite;
    }
    @-webkit-keyframes shining {
        from {
            text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
        }
        to {
            text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
        }
    }
    <html>
        <head>
            <link rel="stylesheet" href="./css/neno-text-style.css">
        </head>
        <body>
            <p class="neon">【前端实验室】分享前端最新、最实用前端技术</p>
        </body>
    </html>

    四.打字机效果

    +4.gif

    该效果主要是通过改变容器的宽度实现的。

    .typing {
        color: white;
        font-size: 2em;
        width: 21em;
        height: 1.5em;
        border-right: 1px solid transparent;
        animation: typing 2s steps(42, end), blink-caret .75s step-end infinite;
        font-family: Consolas, Monaco;
        word-break: break-all;
        overflow: hidden;
    }
    /* 打印效果 */
    @keyframes typing {
        from {
            width: 0;
        }
        to {
            width: 21em;
        }
    }
    /* 光标 */
    @keyframes blink-caret {
        from,
        to {
            border-color: transparent;
        }
        50% {
            border-color: currentColor;
        }
    }
    <html>
       <head>
       <link rel="stylesheet" href="./css/typing-style.css">
       </head>
       <body>
       <div class="typing">【前端实验室】分享前端最新、最实用前端技术</div>
    </html>

    white-space:nowrap属性主要是为了保证一行显示,这里考虑到英文字母的显示,去除了该属性,保证不会出现字符间断的情况。

    word-break:break-all使英文字符可以一个一个的呈现出来。

    animation属性中的steps功能符可以让动画断断续续的执行,而非连续执行。

    steps()语法表示:steps(number, position),其中number关键字表示将动画分为多少段 ;position关键字表示动画是从时间段的开头连续还是末尾连续,支持start和end俩个关键字,含义分别如下:

    光标效果是通过box-shadow模拟实现的。 通过上述的这几个属性就可以实现一个简易的打字机效果了~

    五.故障风格文字效果

    +5.gif

    该动画效果比较复杂,主要用到了CSS伪元素、元素自定义属性、蒙版属性、animation动画等等。

    <div class="text" data-text="欢迎关注微信公众号【前端实验室】">
      欢迎关注微信公众号【前端实验室】
    </div>

    这里主要使用了自定义属性,data-加上自定义的属性名,赋值要显示的文字供伪元素获取到对应的文字。

    @keyframes animation-before{
        0% {
            clip-path: inset(0 0 0 0);
        }
        ...
        100% {
            clip-path: inset(.62em 0 .29em 0);
        }
    }
    @keyframes animation-after{
          0% {
            clip-path: inset(0 0 0 0);
        }
        ...
        100% {
            clip-path: inset(.29em 0 .62em 0);
        }
    }

    这里设置了两个keyframes,分别为 animation-before 、animation-after,前者是准备给伪元素 before 使用的,后者是给伪元素 after 使用的。

    其中clip-path属性是CSS3的新属性蒙版,其中的inset()值表示的是蒙版形状为矩形,定义蒙版的作用区域后通过@keyframes来设置逐帧动画,使蒙版的作用区域在垂直方向一直变化,实现上下抖动的效果。

    .text{
        display: inline-block;
        font-size: 3.5em;
        font-weight: 600;
        padding: 0 4px;
        color: white;
        position: relative;
    }
    .text::before{
        content: attr(data-text);
        position: absolute;
        left: -2px;
        width: 100%;
        background: black;
        text-shadow:2px 0 red;
        animation: animation-before 3s infinite linear alternate-reverse;
    }
    .text::after{
        content: attr(data-text);
        position: absolute;
        left: 2px;
        width: 100%;
        background: black;
        text-shadow: -2px 0 blue;
        animation: animation-after 3s infinite linear alternate-reverse;
    }

    最后我们设置两个伪元素before和after,分别定位到跟父元素同样的位置,然后分别向左、右侧移一点点的距离,制作一个错位的效果,然后都将背景色设置为与父元素背景色一样的颜色,用于遮挡父元素

    这样就可以实现了一个完美的故障风格的文字展示动画了~

    炫酷的特效可以为我们的网页增添不一样的风采,本文中实现的效果源代码大师兄已经上传到Github,公众号后台回复aaa文字特效即可获取,快来跟我们一起学习吧!

    (学习视频分享:css视频教程

    以上就是整理分享5种纯CSS实现炫酷的文字效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金,如有侵犯,请联系admin@php.cn删除
    专题推荐:css
    上一篇:jsonp和ajax的区别是什么 下一篇:Ant Design创建一个树形组件,实现编辑、搜索和定位功能

    相关文章推荐

    • css3中常用的背景属性有哪几个• css3动画怎么设置执行一次• css3控制元素隐藏的方式有哪些• css3的边距属性包括哪两种• css3实现动画的好处有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网