源代码下载

 

　　https://github.com/comehope/front-end-daily-challenges

 

　　代码解读

 

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

 

　　<pclass="rainbow">

 

　　web

 

　　<spandata-text="web"></span>

 

　　<spandata-text="web"></span>

 

　　<spandata-text="web"></span>

 

　　<spandata-text="web"></span>

 

　　</p>

 

　　居中显示：

 

　　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;

 

　　}

 

　　大功告成！







本文转载自中文网