怎么使用纯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实现彩虹条纹文字的效果”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
本文名称:怎么使用纯CSS实现彩虹条纹文字的效果
网址分享:http://myzitong.com/article/pdpded.html