纯CSS实现的文字效果还可以这么酷炫
大家好,我是前端实验室的大师兄!
前言
CSS
是一门很特殊的语言,你认为CSS
只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能。
本文中大师兄为你精选了5个使用纯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;
二.彩虹文字效果(跑马灯)
.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
关键字表示动画是从时间段的开头连续还是末尾连续,支持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::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,公众号后台回复文字特效
即可获取,快来跟我们一起学习吧!
进了前端门,便是一家人
原创不易,点赞、留言、分享就是大师兄写下去的动力!
纯CSS实现的文字效果还可以这么酷炫相关推荐
- 纯CSS实现的文字效果
大家好,我是前端实验室的大师兄! 前言 CSS是一门很特殊的语言,你认为CSS只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能. 本文中大师兄为你精选了10个使用纯CSS实现的文 ...
- 纯CSS制作的图形效果
纯CSS制作的图形效果 很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
- 不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果 原文:不可思议的纯 CSS 实现鼠标跟随效果 直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
- HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果,css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴 本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效 ...
- css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码,本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码 本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
- 用纯css模拟下雪的效果
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言 由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非 ...
- HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白 一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
- jQuery和CSS制作霓虹灯文字效果
原文:jQuery和CSS制作霓虹灯文字效果 源代码下载地址:http://www.zuidaima.com/share/1607121521200128.htm
- html导航凹凸效果,纯CSS实现底部弧度效果(凹凸圆弧)
相信大家再开中中都遇到过底部边为圆弧(凹凸圆弧),其它三边都正常的情况,这种图之前我都会采用图片去搞,但是身为一名开发人员(算是程序员了),应该从便曾的角度去解决问题,所以今天分享下纯css实现底部弧 ...
最新文章
- 中国阻燃纤维板市场运行局势分析与产销需求前景展望报告2022年
- 逻辑判断 java_写 JS 逻辑判断,不要只知道用 if-else 和 switch
- 河南彩民中奖3亿5千万
- 纯CSS将图片转换成黑白
- CXF(2.7.10) - A simple JAX-WS service
- 知识+AI融合创新探索,华为云论文被AI顶级学术期刊IEEE TPAMI接受
- 测试机器学习算法的好坏
- JDBCAPI简介(二)
- jeecg框架 弹出框问题
- 2016年个人简历模板
- Unity关于Oculus Quest2 入门开发:(二)将Unity发布的apk文件安装到Oculus Quest2
- windows +caffe+python2.7或者python3.5编译 。
- 表格标签-表格基本结构
- [转载]坐标系统与投影变换_-刘艳红-_新浪博客
- 史蒂夫·保罗·乔布斯
- 如何查看同一服务器上挂有多少个网站
- vue form表单验证清除
- amCharts 5.2.31 Crack
- 内事不决问张昭,外事不决问周瑜,“ 排序 ”不决问威少
- 豆芽的生长过程观察日记-2020年
热门文章
- 串口Modbus从设备模拟器-DevSimulate
- 西电Linux用户名和密码,在西电使用校内Linux 开源软件镜像
- 输出大写字母字符串中每个大写字母之后的第5个字母所对应的小写字母
- Flex3下载 安装 注册码
- 基于MQTT的消息发布订阅python实现
- Java画不规则,及拖动直线
- 如何在XCode中更改iPhone或iPad模拟器类型
- 耳机工程师谈Dirac: Dirac开创了用软件来实现HIFI的新思路
- matlab设计二进制波形,二进制调制系统的仿真与分析
- C语言-指针-基础用法、运算、指针与数组、指针数组、多级指针、void指针和const修饰符-学习笔记08