html径向渐变怎么写彩虹,CSS3 彩虹渐变文本

落日映苍穹つ 2022-10-08 00:39 116阅读 0赞

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Raleway:400);

body \{

background: \#222;

height: 100vh;

width: 100vw;

overflow: hidden;

.wrd \{

position: absolute;

text-align: center;

font-size: 120px;

margin-top: 120px;

height: 20px;

max-width: content-box;

overflow: hidden;

font-weight: bold;

padding: 0;

right: 0;

left: 0;

color: black;

line-height: 90px;

font-family: 'Raleway', sans-serif;

.wrd:nth-child(1) \{

opacity: 0;

height: 10px;

z-index: -1;

color: \#33b2cc;

\-webkit-animation: fade 1s 0.2s linear alternate infinite;

animation: fade 1s 0.2s linear alternate infinite;

.wrd:nth-child(2) \{

opacity: 0;

height: 20px;

z-index: -2;

color: \#33c;

\-webkit-animation: fade 1s 0.4s linear alternate infinite;

animation: fade 1s 0.4s linear alternate infinite;

.wrd:nth-child(3) \{

opacity: 0;

height: 30px;

z-index: -3;

color: \#b233cc;

\-webkit-animation: fade 1s 0.6s linear alternate infinite;

animation: fade 1s 0.6s linear alternate infinite;

.wrd:nth-child(4) \{

opacity: 0;

height: 40px;

z-index: -4;

color: \#c36;

\-webkit-animation: fade 1s 0.8s linear alternate infinite;

animation: fade 1s 0.8s linear alternate infinite;

.wrd:nth-child(5) \{

opacity: 0;

height: 50px;

z-index: -5;

color: \#cc8033;

\-webkit-animation: fade 1s 1s linear alternate infinite;

animation: fade 1s 1s linear alternate infinite;

.wrd:nth-child(6) \{

opacity: 0;

height: 60px;

z-index: -6;

color: \#9c3;

\-webkit-animation: fade 1s 1.2s linear alternate infinite;

animation: fade 1s 1.2s linear alternate infinite;

.wrd:nth-child(7) \{

opacity: 0;

height: 70px;

z-index: -7;

color: \#33cc4d;

\-webkit-animation: fade 1s 1.4s linear alternate infinite;

animation: fade 1s 1.4s linear alternate infinite;

.wrd:nth-child(8) \{

opacity: 0;

height: 80px;

z-index: -8;

color: \#3cc;

\-webkit-animation: fade 1s 1.6s linear alternate infinite;

animation: fade 1s 1.6s linear alternate infinite;

.wrd:nth-child(9) \{

opacity: 0;

height: 90px;

z-index: -9;

color: \#334dcc;

\-webkit-animation: fade 1s 1.8s linear alternate infinite;

animation: fade 1s 1.8s linear alternate infinite;

@-webkit-keyframes fade \{

100% \{

opacity: 1;

@keyframes fade \{

100% \{

opacity: 1;

html径向渐变怎么写彩虹,CSS3 彩虹渐变文本

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 css新特性：线性渐变详解(重复性线性渐变、径向渐变、重复性径向渐变的使用)

相关什么是CSS中的渐变（gradient）？如何使用CSS创建线性渐变和径向渐变？

相关 CSS 3种渐变效果（线性渐变，径向渐变，圆锥型渐变）

相关 CSS3-径向渐变

相关 html中怎么做彩虹,web前端入门到实战：纯CSS画动态彩虹

相关 html径向渐变怎么写彩虹,CSS3 彩虹渐变文本

相关 HTML径向效果,HTML5版径向渐变梯度色彩

相关 CSS线性渐变，径向渐变

相关 css3-颜色渐变线性径向

相关 CSS 彩虹字动态彩虹字