https://mp.weixin.qq.com/s/mhBeciZL2nrTeFQL2-qN3w <!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> <style> body { margin: 0; padding: 0 } /* @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap"); */ .g-container { position: relative; width: 100vw; height: 100vh; background: #000; font-family: "Montserrat", sans-serif; color: #fff; font-size: 120px; filter: contrast(15); } .word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: change 8s infinite ease-in-out; } .word:nth-child(1) { animation-delay: -8s; } .word:nth-child(2) { animation-delay: -6.4s; } .word:nth-child(3) { animation-delay: -4.8s; } .word:nth-child(4) { animation-delay: -3.2s; } @keyframes change { 0%, 5%, 100% { filter: blur(0px); opacity: 1; } 50%, 80% { filter: blur(80px); opacity: 0; } } </style> </head> <body> <!-- https://mp.weixin.qq.com/s/mhBeciZL2nrTeFQL2-qN3w --> <div class="g-container"> <div class="word">iPhone</div> <div class="word">13</div> <div class="word">Pro</div> <div class="word">强得很！</div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 巧用滤镜实现高级感拉满的文字快闪切换效果 喜欢 (2)or分享 (0)
