CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
效果展示
+ U2 i% H$ M$ G

: k1 Y; c' O/ g  q+ iCSS 知识点
灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
动画场景分析
从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：

! E0 F8 O5 w6 i& @! e" z; B
  K8 V9 ^. e6 T  s0 V+ m
整体页面布局
<div class="loader">
  <!-- 小火箭和云朵容器 -->
- J/ I5 \% @" M( Y, a9 J  <div class="rocket">
    <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>
    <i class="fa-solid fa-cloud" style="--i:4"></i>
    <i class="fa-solid fa-rocket"></i>
  </div>
. T" [8 r6 T3 c$ |  <!-- 渐变色背景容器 -->
  ^3 d9 D' }: L1 s. l  <span><i></i></span>
</div>

场景容器样式实现
3 K, l5 |* @1 @7 I9 S2 @/* 控制渐变色容器大小，也是整个动画的容器 */
.loader span {
  position: relative;
  width: 250px;
; }' j& E# d* {" h* C4 h" _  height: 250px;
1 `! n5 F9 b; y3 X  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;
& v  d4 ^- S5 f2 M, m$ c}
+ ~1 P3 S$ C9 G( O8 [
/* 外层圆样式 */
, U3 E3 W" _( t7 Z.loader span::before {
8 k) c$ ~' f, S3 d% [  g  j  content: "";
  position: absolute;
& \) H1 L; m" F+ z  inset: 0;
  border-radius: 50%;
( c. S( ~  }3 B: n, i  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
/ J  m5 E8 B$ i' t% u}
* I. x! h; b; k2 c) _
/* 内层圆样式 */
.loader span::after {
) G" z7 L- V8 X" V% x; z7 z  content: "";
  position: absolute;
  inset: 40px;
  background: #eaeef0;
  border: 3px solid #eaeef0;
  border-radius: 50%;
0 A3 @$ l+ |% c) r' [* @  box-shadow: -8px -8px 25px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15),
/ ]9 n4 P# U( b3 `) y    inset 3px 3px 10px rgba(0, 0, 0, 0.15), inset -1px -1px 15px rgba(255, 255, 255, 1);
2 ~" Q' p6 D' F}

/* 背景颜色 */
( @3 ]: e/ I3 k& d5 r# h7 r: P.loader span i {
4 N( T+ B( K, p# p+ J; X+ G) v  position: absolute;
  u; |2 N' t8 }8 ?; q4 o! }: P5 f: L) m: [  inset: 0;
  border-radius: 50%;
- U+ `6 ^2 }/ T4 S/ g  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
4 y' H3 }3 }+ }& E4 ]4 q' \. `  /* 实现背景旋转动画 */
  animation: animate 1s linear infinite;
}

9 L- L/ O. @% B4 i+ l; K@keyframes animate {
& G: U$ t4 D% `$ s, C4 ^! D6 W  0% {
$ X/ O# B3 d4 _& h    transform: rotate(0deg);
: F, q4 }! ]" ?. F  M7 `& J* u  }
  100% {
    transform: rotate(360deg);
2 M+ h" M- w' ?3 b. i  }
}


小火箭样式实现
.rocket {
  position: absolute;
' u/ w" j! ]1 k/ x+ R  inset: 50px;
$ n; E9 a( u2 b; J& i# }* @' h  z-index: 10;
  display: flex;
1 Q8 c3 [, D$ ^4 D4 ^  justify-content: center;
  align-items: center;
  /* 设置装载小火箭容器超出部分隐藏 */
! ]$ |! [% m/ o3 Y, j- n- a  overflow: hidden;
" e! D5 i. R3 g7 h. _  border-radius: 50%;
3 c9 ~  a% E/ C. _0 ]. k& U}
  \% s* k  j7 x( n& w
.rocket .fa-rocket {
. z' c3 _6 x0 H2 T, Y, j8 E  position: absolute;
1 e+ ~1 ~( O; a, s. N- G; @0 r  color: #ff518c;
# G( B" u6 ~1 @! W4 b/ J  font-size: 3.5em;
/ S7 B# [) n) Z& ~+ t  -webkit-text-stroke: 2px #000;
1 K. P; x/ M4 t' z( z* E  /* 小火箭加速动画 */
  animation: animateRocket 0.2s linear infinite;
}

+ k' A. b+ V; x@keyframes animateRocket {
3 V: F8 J4 h- e' j; a. l; @# i  0%,
& x  B4 N/ T4 H7 F) u- ^  100% {
    transform: translate(0px, 0px) rotate(-45deg);
* y6 P2 K( ?+ n3 c  }
$ B3 J4 G  _3 B& S  50% {
& t4 d7 {. t* t6 q3 n    transform: translate(0, 3px) rotate(-45deg);
  }
; R  O# [3 f* l; z2 ?}
/ `' {9 b# X, l  v
完成上述代码后，效果如下图：
0 [, i' q' m9 Y: P- L云朵样式实现
; k" R4 }- }: E2 r5 O# T- \/ X.fa-cloud {
  position: absolute;
  top: calc(35px * var(--i));
# b! D* M) A* l( G8 R  left: calc(45px * var(--i));
  font-size: 2em;
* o- m4 V% N1 L9 @" S, u( S  color: #fff;
  -webkit-text-stroke: 2px #000;
9 |4 w7 ], ~) c  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
- }+ z) Q5 o% J1 ~  animation-delay: calc(-0.5s * var(--i));
}

/* 云层动画 */
! Q, e" H2 k4 ?. j5 M4 p@keyframes animateClounds {
8 K5 R. [( u$ S) s# T1 T  0% {
3 ]! _& W7 D7 H    transform: translateY(calc(-35 * 5px));
  }
2 h' k9 A6 R1 ?! }2 C9 _( T  100% {
    transform: translateY(calc(35 * 5px));
  }
8 b: X. M( Z; x! i}

6 A( m; q$ j6 U6 Y8 q* w6 Z