共计 1626 个字符,预计需要花费 5 分钟才能阅读完成。
代码来自头条号 ” 前端小智 ”, 侵权删
<!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>
正文完