文字闪烁特效htmlcss
显示效果
实现:
1.定义html标签: 佛 主 保 佑 , 考 试 全 过 !
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 等待多少秒,然后才开始动画;
完整原码直接添加微信号领取:codingbb