这是一款纯css3绘制LED文字闪烁动画、霓虹灯文字动画特效。支持中文、英文字母效果。
使用方法
直接在页面引入CSS3样式即可
<style> @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"); body { margin: 0; display: flex; height: 100vh; background: #240041; font-family: Montserrat, sans-serif; } h1 { margin: auto; font-size: 20vw; text-align: center; text-transform: uppercase; color: #900048; white-space: nowrap; letter-spacing: -.15em; } span:nth-child(1) { animation: blink 1s steps(1, start) 0.33s infinite; } span:nth-child(2) { animation: blink 1s steps(1, start) 0.66s infinite; } span:nth-child(3) { animation: blink 1s steps(1, start) 0.33s infinite; } span:nth-child(4) { animation: blink 1s steps(1, start) 0.66s infinite; } span:nth-child(5) { animation: blink 1s steps(1, start) 0.33s infinite; } span:nth-child(6) { animation: blink 1s steps(1, start) 0.66s infinite; } @keyframes blink { 33% { color: #FF4057; } 66% { color: #FF8260; } } </style>
Html结构
在页面引入以下html代码
<h1> <span>r</span> <span>u</span> <span>z</span> <span>w</span> </h1>