纯CSS实现的文字效果竟然可以这么酷炫!

前端实验室设为星标精品文章第一时间阅读

大家好,我是前端实验室的大师兄!

前言

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

本文中大师兄为你精选了10个使用纯CSS实现的文字炫酷效果,欣赏完之后一定要自己实现体验一番哦~

一.渐变文字效果

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

  1. 给文本容器设置渐变背景
 background: linear-gradient(90deg, black 0%, white 50%, black 100%);
  1. 设置webkit-background-clip属性,以文字作为裁剪区域向外裁剪
-webkit-background-clip: text;        background-clip: text;
  1. 通过-webkit-animation属性设置动画,即可实现上述效果
-webkit-animation: shining 3s linear infinite;
        animation: shining 3s linear infinite;

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

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

三.发光文字效果

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

四.打字机效果

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

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

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

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

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

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

  • start:表示直接开始
  • end:表示戛然而止,为默认值

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

五.故障风格文字效果

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

(0)

相关推荐

  • 深入理解CSS 动画

    通过CSS3 可以创建动画,它可以取代许多网页动画图像.Flash 动画以及 JavaScript实现的效果.要创建 CSS3 动画,需要学习 @keyframes 规则. @keyframes 规则 ...

  • 此处@鸿星尔克! 做渐变荧光文字设计,运动鞋海报酷炫感拉满!

    今天,PS学什么? 继续夯实文字设计技巧! 在PS工作中,想要吸引更多的年轻目光,可以用渐变荧光的文字设计,给鞋子做一个氛围感营造,增加画面冲击力和时尚感! fighting.time. 今天,P力继 ...

  • 今天分享的剪映知识,如何制作透视文字,简单易学又酷炫。

    今天分享的剪映知识,如何制作透视文字,简单易学又酷炫。

  • 爆火神曲《芒种》尤克里里指弹版,竟然可以这么酷炫

    爆火神曲《芒种》尤克里里指弹版,竟然可以这么酷炫

  • 如何通过使用CSS实现渐变文字的效果

    WEB前端开发社区 今天 很难使网站脱颖而出.因此,这里有一个小技巧,可以改善所有目标网页或标题:使用渐变文字. 只要确保不要过度使用它即可.渐变文字绝对不能用在较长的文本中.但可以在标题或者特定醒目 ...

  • 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​   正文 1.基 ...

  • 黄金文字效果

    效果图 ◆  ◆  ◆ 一般步骤及说明 1.新建文档,背景色为黑色. 2.输入文字. 3.复制文字图层,并为文字副本图层添加"渐变叠加"图层样式. (1)编辑"渐变&qu ...

  • 果冻文字效果

    效果图 操作演示视频 ◆  ◆  ◆ 步骤及说明 新建文档(白色背景图层),并使用文字工具输入文字. 提示: 建议选择比较浑厚的字体,比如英文字体可考虑"Impact",中文字体可 ...

  • 三星堆惊观文字!竟然是龙马龟背的“河图洛书”

    负羲图(鳖冷时期)(三星堆出土) 刚看到此像,我马上判断是鳖冷时代文物,因为龟是鳖冷形象,此器左右各一只鳖,一定是第三代帝王的鳖冷之物!龟背上还铸成不少图纹,觉得不错!我点下头认可了,准备看下一幅文物 ...

  • 哪一个穴位的养生效果竟然比足三里的还要好?

    谈到养生大穴一般人都会想到足三里,可是养生必须先谈到先天之本,只有固本才能开源,打开人体本身的正气,不敢说治百病,至少不怕病.下面这个穴位,比足三里更好. 太溪穴可以滋阴益肾,壮阳强腰,是肾经的原穴. ...