站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

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

时间:2022-01-15 [网络编程]作者:fabuyuan 浏览:6 次

本篇文章给大家带来了5中非常炫酷的文字效果,这些效果全是利用css来实现的,希望对大家有帮助。

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

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

一.渐变文字效果

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

该效果主要利用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>

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

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

.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>

三.发光文字效果

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

该效果主要利用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>

四.打字机效果

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

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

.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俩个关键字,含义分别如下:

  • start:表示直接开始

  • end:表示戛然而止,为默认值

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

五.故障风格文字效果

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

该动画效果比较复杂,主要用到了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实现炫酷的文字效果的详细内容,更多请关注站长家园其它相关文章!

本文标签:  css

转载请注明来源:整理分享5种纯CSS实现炫酷的文字效果

本文永久链接地址:https://www.adminjie.com/post/7672.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • HTML里怎么设置thead表头的颜色

      HTML里怎么设置thead表头的颜色

      HTML中设置thead表头颜色的方法:1、使用“thead{color:颜色值;}”语句设置表头的字体颜色;2、使用"thead{background:...

    • 演示文稿储存以后默认的文件扩展名是什么

      演示文稿储存以后默认的文件扩展名是什么

      演示文稿储存以后默认的文件扩展名是ppt,一套完整的演示文稿文件一般包含片头动画、PPT封面、前言、目录、过渡页、图表页、图片页、文字页、封底、片尾动画等。本文...

    • oracle中not的用法是什么

      oracle中not的用法是什么

      在oracle中,not用于对指定的条件取反,当指定的条件为真时,not的结果就是假,当指定的条件为假时,not的结果就是真,语法为“Selectwhere...

    • Vue3中5个可以提高开发效率的小知识【整理分享】

      Vue3中5个可以提高开发效率的小知识【整理分享】

      本篇文章给大家聊聊Vue3开发,整理分享5个可以提高开发效率的小知识,让你在Vue3的项目开发中更加丝滑,希望对大家有所帮助!最近鼓捣了一下Vue3+...

    • php5.6.31如何编译安装

      php5.6.31如何编译安装

      php5.6.31编译安装的方法:1、添加epel源;2、安装依赖;3、下载并解压php5.6.31;4、修改php-fpm.conf;5、启动php-fpm即...

    热门文章