代码来自头条号"前端小智",侵权删
<!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>Document</title></head><style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #ffeb3b; overflow: hidden; } .pulse{ position: relative; width: 200px; height: 200px; background-color: red; border-radius: 50%; } span{ display: inline-block; width: 200px; height: 200px; border-radius: 50%; background-color: red; position: absolute; left: 0; top: 0; animation: bg 1.5s linear infinite; } @keyframes bg { 0%{ transform: scale(1); opacity: 0.5; } 90%{ transform: scale(3); } 100%{ transform: scale(3); opacity: 0; } } .rocket{ width: 100px; height: 100px; position: relative; top: 50px; left: 50px; animation: fly 0.1s ease infinite; } @keyframes fly{ 0%, 100%{ transform: translateY(-1px); } 50% { transform: translateY(1px); } } img{ width: 100px; height: 100px; } .rocket::before{ /* 火箭尾部的火焰 */ content: ''; position: absolute; bottom: -250px; left: 50%; transform: translateX(-50%); width: 20px; height: 250px; background: linear-gradient(#ffc107, transparent); } .rocket::after{ /* 火箭尾部的火焰,应用blur做了暗影的成果 */ content: ''; position: absolute; bottom: -250px; left: 50%; transform: translateX(-50%); width: 20px; height: 250px; background: linear-gradient(#ffc107, transparent); filter: blur(20px); }</style><body> <div class="pulse"> <span style="--i:1"></span> <span style="--i:2"></span> <span style="--i:3"></span> <span style="--i:4"></span> <span style="--i:5"></span> <div class="rocket"> <img src=" https://img01.jituwang.com/200310/173754-2003101R95361.jpg" alt=""> </div> </div></body></html>