HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="CSS/huojina.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel=""stylesheet>
</head>
<body>
<div class="loader">
<div class="rocket">
<i class="fa fa-rocket" aria-hidden="true"></i>
<i class="fa fa-cloud" aria-hidden="true" style="--i:0"></i>
<i class="fa fa-cloud" aria-hidden="true" style="--i:1"></i>
<i class="fa fa-cloud" aria-hidden="true" style="--i:2"></i>
<i class="fa fa-cloud" aria-hidden="true" style="--i:3"></i>
</div>
<span><i></i></span>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #eaeef0;
}
.loader{
position: relative;
display: flex;
}
.loader span{
position: relative;
width: 250px;
height: 250px;
background: #eaeef0;
border: 6px solid #eaeef0;
border-radius: 50%;
box-shadow: -8px -8px 15px rgba(255,255,255,1),
8px 8px 25px rgba(0,0,0,0.15);
overflow: hidden;
}
.loader span::before{
content: "";
position: absolute;
inset: 0;
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: #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.25),
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%;
filter: blur(5px);
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;
border-radius: 50% ;
justify-content: center;
align-items: center;
overflow: hidden;
}
.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%,100%{
transform: translate(0px,0px) rotate(-45deg);
}
50%{
transform: translate(0px,-3px) rotate(-45deg);
}
}
.fa-cloud{
position: absolute;
top: calc(35px * var(--i));
left: calc(45px * var(--i));
font-size: 2em ;
color: white;
-webkit-text-stroke: 2px #000;
animation: animateClouds 1s linear infinite;
animation-delay: calc(-0.5s * var(--i));
}
@keyframes animateClouds {
0%{
transform: translateY(calc(-35 * 5px));
}
100%{
transform: translateY(calc(35 * 5px));
}
}