源码如下
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>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./vfx.css">
</head>
<body>
<div class="loader">
<div class="rocket">
<!-- 火箭图标 -->
<i class="fa-solid fa-rocket"></i>
<!-- 云朵图标 -->
<i class="fa-solid fa-cloud" style="--i:0;"></i>
<i class="fa-solid fa-cloud" style="--i:1;"></i>
<i class="fa-solid fa-cloud" style="--i:2;"></i>
<i class="fa-solid fa-cloud" style="--i:3;"></i>
</div>
<span>
<i></i>
</span>
</div>
</body>
</html>
"--i" 是自定义的 CSS 变量,它的值可以在 CSS 中被引用和修改。0/1/2/3 是给 --i 变量赋的初始值。在这里,--i 变量被用来控制每个云朵图标的位置偏移量,通过设置不同的值来实现每个云朵的位置调整
CSS文件:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/* background-color: #eaeef0; */
}
.loader {
position: relative;
display: flex;
overflow: hidden;
}
.loader span {
position: relative;
width: 300px;
height: 300px;
background: #eaeef0;
border: 6px solid #eaeef0;
border-radius: 50%;
overflow: hidden;
}
.loader span::before {
content: "";
position: absolute;
border-radius: 50%;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5),
inset -5px -5px 15px rgba(255, 255, 255, 1);
}
.loader span::after {
content: "";
position: absolute;
inset: 40px;
background-color: #eaeef0;
border: 3px solid #eaeef0;
border-radius: 50%;
box-shadow: -8px -8px 25px rgba(255, 255, 255, 1),
8px 8px 25px rgba(0, 0, 0, 0.15),
inset 3px 3px 10px rgba(0, 0, 0, 0.15),
inset -1px -1px 15px rgba(255, 255, 255, 1);
}
.loader span i {
position: absolute;
inset: 0;
border-radius: 50%;
background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
animation: animate 1s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.rocket {
position: absolute;
inset: 50px;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 50%;
}
.rocket .fa-rocket {
position: absolute;
color: #ff518c;
font-size: 3.5em;
-webkit-text-stroke: 2px #000;
animation: animateRocket 0.2s linear infinite;
}
@keyframes animateRocket {
0% {
transform: translate(0, 0) rotate(-45deg);
}
100% {
transform: translate(0px, 3px) rotate(-45deg);
}
}
.fa-cloud {
position: absolute;
top: calc(35px*var(--i));
left: calc(45px*var(--i));
/*通过自定义变量来控制每个云朵的偏移量 */
font-size: 2em;
color: #fff;
-webkit-text-stroke: 2px #000;
animation: animateClouds 1s linear infinite;
animation-delay: calc(-0.5s*var(--i));
/* animation-delay定义了动画的延迟时间,使用了 calc() 函数来计算延迟时间
var(--i)为html中的自定义变量, 从而使得每个云朵图标在前
一个云朵动画开始后的一定时间内开始动,
可以实现一种错开的效果,
值是负值是因为让动画在其正常开始之前就开始
*/
}
@keyframes animateClouds {
0% {
transform: translateY(calc(-35*5px));
}
100% {
transform: translateY(calc(35*5px));
}
}