上效果先:
先言:
看过我文章可以知道,这东西似曾相识~ ╭(●`∀´●)╯确实,这个和我另一篇文章“文字点闪特效”原理是差不多的
实现:
1.定义html标签:
<h1><span>佛</span><span>主</span><span>保</span><span>佑</span><span>,</span><span>考</span><span>试</span><span>全</span><span>过</span><span>!</span></h1>
2.文字的基本样式,大小颜色等:
h1{font-family: 'fangsong';font-size: 6em;color: transparent;}span{display: table-cell;animation: san 3s linear infinite;}
display: table-cell;此元素会作为一个表格单元格显示(类似 和 )
color: transparent;文字颜色透明
3.文字发亮的效果,就闪一下然后就又会(20%-80%的时候)变透明:
@keyframes san{0%,100%{color: rgb(255, 255, 255); text-shadow: 0 0 5px rgb(1, 231, 247),0 0 15px rgb(1, 231, 247),0 0 25px rgb(1, 231, 247),0 0 50px rgb(1, 231, 247),0 0 80px rgb(1, 231, 247),0 0 120px rgb(1, 231, 247),0 0 160px rgb(1, 231, 247),0 0 200px rgb(1, 231, 247),0 0 300px rgb(1, 231, 247),0 0 400px rgb(1, 231, 247),0 0 500px rgb(1, 231, 247);}20%,80%{color: transparent;text-shadow: none;}}
text-shadow:是给它加阴影,写了很多行是为了阴影更亮;
4.制造时间差,让不同的时间不同的文字亮;
h1 span:nth-child(1){animation-delay:0s;}h1 span:nth-child(2){animation-delay:0.1s;} h1 span:nth-child(3){animation-delay:0.2s;}h1 span:nth-child(4){animation-delay:0.3s;}h1 span:nth-child(5){animation-delay:0.4s;}h1 span:nth-child(6){animation-delay:0.5s;}h1 span:nth-child(7){animation-delay:0.6s;}h1 span:nth-child(8){animation-delay:0.7s;}h1 span:nth-child(9){animation-delay:0.8s;}h1 span:nth-child(10){animation-delay:0.9s;}
animation-delay 等待多少秒,然后才开始动画;
完整代码:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>北极光之夜。</title><style>*{padding: 0;margin: 0;box-sizing: border-box;}body{height: 100vh;display: flex;align-items: center;justify-content: center;background-color: rgb(0, 0, 0);}h1{font-family: 'fangsong';font-size: 6em;color: transparent;}span{display: table-cell;animation: san 3s linear infinite;}h1 span:nth-child(1){animation-delay:0s;}h1 span:nth-child(2){animation-delay:0.1s;} h1 span:nth-child(3){animation-delay:0.2s;}h1 span:nth-child(4){animation-delay:0.3s;}h1 span:nth-child(5){animation-delay:0.4s;}h1 span:nth-child(6){animation-delay:0.5s;}h1 span:nth-child(7){animation-delay:0.6s;}h1 span:nth-child(8){animation-delay:0.7s;}h1 span:nth-child(9){animation-delay:0.8s;}h1 span:nth-child(10){animation-delay:0.9s;}@keyframes san{0%,100%{color: rgb(255, 255, 255); text-shadow: 0 0 5px rgb(1, 231, 247),0 0 15px rgb(1, 231, 247),0 0 25px rgb(1, 231, 247),0 0 50px rgb(1, 231, 247),0 0 80px rgb(1, 231, 247),0 0 120px rgb(1, 231, 247),0 0 160px rgb(1, 231, 247),0 0 200px rgb(1, 231, 247),0 0 300px rgb(1, 231, 247),0 0 400px rgb(1, 231, 247),0 0 500px rgb(1, 231, 247);}20%,80%{color: transparent;text-shadow: none;}}</style></head><body><h1><span>佛</span><span>主</span><span>保</span><span>佑</span><span>,</span><span>考</span><span>试</span><span>全</span><span>过</span><span>!</span></h1></body></html>
总结:
新的一年,新的希望!