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

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

《整理分享5种纯CSS实现炫酷的文字效果.docx》由会员分享，可在线阅读，更多相关《整理分享5种纯CSS实现炫酷的文字效果.docx（11页珍藏版）》请在冰豆网上搜索。

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

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

一.渐变文字效果

该效果主要利用background-clip:

text配合color实现渐变文字效果首先了解background-clip:

text;的意思：

以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。

给文本容器设置渐变背景

background:

linear-gradient（90deg,black0%,white50%,black100%）;

设置webkit-background-clip属性，以文字作为裁剪区域向外裁剪

-webkit-background-clip:

text;

background-clip:

text;

通过-webkit-animation属性设置动画,即可实现上述效果

-webkit-animation:

shining3slinearinfinite;

animation:

shining3slinearinfinite;

@-webkit-keyframesshining{

from{

background-position:

-500%;

}

to{

background-position:

500%;

}

}

@keyframesshining{

from{

background-position:

-500%;

}

to{

background-position:

500%;

}

}

样式引用

前端实验室

二.彩虹文字效果（跑马灯）

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

text;

-webkit-background-size:

200%100%;

}

该效果也是利用background-clip:

text和线性渐变属性linear-gradient实现，通过设置区域颜色值实现了彩虹文字的效果。

动态彩虹文字需要设置-webkit-animation属性

-webkit-animation:

maskedAnimation4sinfinitelinear;

@keyframesmaskedAnimation{

0%{

background-position:

00;

}

100%{

background-position:

-100%0;

}

}

CSS样式

.rainbow{

letter-spacing:

0.2rem;

font-size:

1.2rem;

text-transform:

uppercase;

}

.rainbowspan{

animation:

rainbow50salternateinfiniteforwards;

}

@keyframesrainbow{

0%{

color:

#efc68f;

}

...

100%{

color:

#8fefed;

}

}

【前端实验室】分享前端最新、最实用前端技术