整理分享5种纯CSS实现炫酷的文字效果文档格式.docx
- 文档编号:22816665
- 上传时间:2023-02-05
- 格式:DOCX
- 页数:11
- 大小:524.97KB
整理分享5种纯CSS实现炫酷的文字效果文档格式.docx
《整理分享5种纯CSS实现炫酷的文字效果文档格式.docx》由会员分享,可在线阅读,更多相关《整理分享5种纯CSS实现炫酷的文字效果文档格式.docx(11页珍藏版)》请在冰豆网上搜索。
@-webkit-keyframesshining{
from{
background-position:
-500%;
}
to{
500%;
}
@keyframesshining{
样式引用
<
html>
<
linkrel="
stylesheet"
href="
./css/neno-text-style.css"
>
body>
pclass="
neon"
前端实验室<
/p>
/body>
/html>
二.彩虹文字效果(跑马灯)
.text{
letter-spacing:
0.2rem;
font-size:
1.5rem;
background-image:
-webkit-linear-gradient(left,#147B96,#E6D20525%,#147B9650%,#E6D20575%,#147B96);
-webkit-text-fill-color:
transparent;
-webkit-background-clip:
-webkit-background-size:
200%100%;
该效果也是利用background-clip:
text和线性渐变属性linear-gradient实现,通过设置区域颜色值实现了彩虹文字的效果。
动态彩虹文字需要设置-webkit-animation属性
maskedAnimation4sinfinitelinear;
@keyframesmaskedAnimation{
0%{
00;
100%{
-100%0;
CSS样式
.rainbow{
1.2rem;
text-transform:
uppercase;
.rainbowspan{
rainbow50salternateinfiniteforwards;
@keyframesrainbow{
color:
#efc68f;
...
#8fefed;
head>
./css/rainbow-color-text-style.css"
/head>
divclass="
text"
【前端实验室】分享前端最新、最实用前端技术<
/div>
三.发光文字效果
该效果主要利用text-shadow属性实现。
text-shadow属性向文本添加一个或多个阴影。
该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。
.neon{
#cce7f8;
2.5rem;
-webkit-animation:
shining0.5salternateinfinite;
text-shadow:
0010pxlightblue,0020pxlightblue,0030pxlightblue,0040pxskyblue,0050pxskyblue,0060pxskyblue;
005pxlightblue,0010pxlightblue,0015pxlightblue,0020pxskyblue,0025pxskyblue,0030pxskyblue;
四.打字机效果
该效果主要是通过改变容器的宽度实现的。
.typing{
white;
2em;
width:
21em;
height:
1.5em;
border-right:
1pxsolidtransparent;
typing2ssteps(42,end),blink-caret.75sstep-endinfinite;
font-family:
Consolas,Monaco;
word-break:
break-all;
overflow:
hidden;
/*打印效果*/
@keyframestyping{
0;
/*光标*/
@keyframesblink-caret{
from,
border-color:
50%{
currentColor;
./css/typing-style.css"
typing"
white-space:
nowrap属性主要是为了保证一行显示,这里考虑到英文字母的显示,去除了该属性,保证不会出现字符间断的情况。
word-break:
break-all使英文字符可以一个一个的呈现出来。
animation属性中的steps功能符可以让动画断断续续的执行,而非连续执行。
steps()语法表示:
steps(number,position),其中number关键字表示将动画分为多少段;
position关键字表示动画是从时间段的开头连续还是末尾连续,支持start和end俩个关键字,含义分别如下:
∙
start:
表示直接开始
end:
表示戛然而止,为默认值
光标效果是通过box-shadow模拟实现的。
通过上述的这几个属性就可以实现一个简易的打字机效果了~
五.故障风格文字效果
该动画效果比较复杂,主要用到了CSS伪元素、元素自定义属性、蒙版属性、animation动画等等。
data-text="
欢迎关注微信公众号【前端实验室】"
欢迎关注微信公众号【前端实验室】
这里主要使用了自定义属性,data-加上自定义的属性名,赋值要显示的文字供伪元素获取到对应的文字。
@keyframesanimation-before{
clip-path:
inset(0000);
inset(.62em0.29em0);
@keyframesanimation-after{
inset(.29em0.62em0);
这里设置了两个keyframes,分别为animation-before、animation-after,前者是准备给伪元素before使用的,后者是给伪元素after使用的。
其中clip-path属性是CSS3的新属性蒙版,其中的inset()值表示的是蒙版形状为矩形,定义蒙版的作用区域后通过@keyframes来设置逐帧动画,使蒙版的作用区域在垂直方向一直变化,实现上下抖动的效果。
.text{
display:
inline-block;
3.5em;
font-weight:
600;
padding:
04px;
position:
relative;
.text:
:
before{
content:
attr(data-text);
absolute;
left:
-2px;
100%;
black;
2px0red;
animation-before3sinfinitelinearalternate-reverse;
after{
2px;
-2px0blue;
animation-after3sinfinitelinearalternate-reverse;
最后我们设置两个伪元素before和after,分别定位到跟父元素同样的位置,然后分别向左、右侧移一点点的距离,制作一个错位的效果,然后都将背景色设置为与父元素背景色一样的颜色,用于遮挡父元素
这样就可以实现了一个完美的故障风格的文字展示动画了~
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 整理 分享 CSS 实现 文字效果