怎么使用纯CSS实现彩虹条纹文字的效果

小编给大家分享一下怎么使用纯CSS实现彩虹条纹文字的效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

创新互联服务项目包括景泰网站建设、景泰网站制作、景泰网页制作以及景泰网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，景泰网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到景泰省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

代码解读

定义dom，容器中包含文本，并且包含4个用于特效，的data-text属性值为与文本相同：

web

居中显示：

html,body{

height:100%;

display:flex;

align-items:center;

justify-content:center;

background:black;

}

定义文本样式：

.rainbow{

color:white;

font-size:300px;

text-transform:uppercase;

font-family:sans-serif;

font-weight:bold;

line-height:1em;

position:relative;

}

用伪元素增加图层，形成彩虹效果：

.rainbowspan::before,

.rainbowspan::after{

content:attr(data-text);

position:absolute;

top:0;

left:0;

overflow:hidden;

}

.rainbowspan:nth-child(1)::before{

color:orchid;

z-index:1;

height:calc(100%-10%*1);

}

.rainbowspan:nth-child(1)::after{

color:mediumpurple;

z-index:2;

height:calc(100%-10%*2);

}

.rainbowspan:nth-child(2)::before{

color:deepskyblue;

z-index:3;

height:calc(100%-10%*3);

}

.rainbowspan:nth-child(2)::after{

color:cyan;

z-index:4;

height:calc(100%-10%*4);

}

.rainbowspan:nth-child(3)::before{

color:mediumspringgreen;

z-index:5;

height:calc(100%-10%*5);

}

.rainbowspan:nth-child(3)::after{

color:yellow;

z-index:6;

height:calc(100%-10%*6);

}

.rainbowspan:nth-child(4)::before{

color:gold;

z-index:7;

height:calc(100%-10%*7);

}

.rainbowspan:nth-child(4)::after{

color:tomato;

z-index:8;

height:calc(100%-10%*8);

}

增加动画效果：

.rainbowspan::before,

.rainbowspan::after{

animation:animate0.8sinfinitealternate;

filter:opacity(0);

}

@keyframesanimate{

from{

filter:opacity(0);

}

to{

filter:opacity(1);

}

}

为图层设置延时，增强动感：

.rainbowspan:nth-child(1)::before{

animation-delay:calc(0.8s-0.1s*1);

}

.rainbowspan:nth-child(1)::after{

animation-delay:calc(0.8s-0.1s*2);

}

.rainbowspan:nth-child(2)::before{

animation-delay:calc(0.8s-0.1s*3);

}

.rainbowspan:nth-child(2)::after{

animation-delay:calc(0.8s-0.1s*4);

}

.rainbowspan:nth-child(3)::before{

animation-delay:calc(0.8s-0.1s*5);

}

.rainbowspan:nth-child(3)::after{

animation-delay:calc(0.8s-0.1s*6);

}

.rainbowspan:nth-child(4)::before{

animation-delay:calc(0.8s-0.1s*7);

}

.rainbowspan:nth-child(4)::after{

animation-delay:calc(0.8s-0.1s*8);

}

最后，把原始文本设置为透明色：

.rainbow{

color:transparent;

}

看完了这篇文章，相信你对“怎么使用纯CSS实现彩虹条纹文字的效果”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！