今天小编给大家分享一下CSS如何实现炫酷的文字效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
CSS是一门很特殊的语言,你认为CSS只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能。
一.渐变文字效果
该效果主要利用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>
二.彩虹文字效果(跑马灯)
.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>
三.发光文字效果
该效果主要利用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>
四.打字机效果
该效果主要是通过改变容器的宽度实现的。
.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模拟实现的。 通过上述的这几个属性就可以实现一个简易的打字机效果了~
五.故障风格文字效果
该动画效果比较复杂,主要用到了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,分别定位到跟父元素同样的位置,然后分别向左、右侧移一点点的距离,制作一个错位的效果,然后都将背景色设置为与父元素背景色一样的颜色,用于遮挡父元素
以上就是“CSS如何实现炫酷的文字效果”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。