html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>灯管文字动画</title> <link rel="stylesheet" href="style.css"> </head> <body> <h2 contenteditable="true">Text</h2> </body> </html>
css代码:
* { margin:0; padding:0; box-sizing: border-box; font-family: arial; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background:#07252d; } h2{ position:relative; font-size: 6em; letter-spacing: 15px; color:#0e3742; text-transform: uppercase; width: 100%; text-align: center; -webkit-box-reflect: below 1px linear-gradient(transparent,#0008); line-height: 0.7em; outline: none; animation: animate 5s linear infinite; } @keyframes animate { 0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92% { color:#0e3742; text-shadow: none; } 18.1%,20.1%,30%,50%,60.1%,80.1%,90%,92.1%,100% { color:#fff; text-shadow: 0 0 10px #03bcf4, 0 0 20px #03bcf4, 0 0 30px #03bcf4, 0 0 40px #03bcf4, 0 0 50px #03bcf4; } }
坚持的力量
wordpress建站,视频剪辑拍摄,动画制作