CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
效果展示
$ O' @* C* I9 [  o9 w' T

CSS 知识点
  J4 B- `3 C2 n: V9 u灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
/ Z2 r0 ~- E: ^7 C动画场景分析
从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：
1 D3 F) U( t5 K4 f! w  I) d
+ v( L) c1 }+ L( E. w

整体页面布局
" S3 z$ f8 V- U! ^5 f- P<div class="loader">
; I, t- o2 n* I2 `3 m0 I& n' D. G' Q  <!-- 小火箭和云朵容器 -->
  <div class="rocket">
    <i class="fa-solid fa-cloud" style="--i:0"></i>
* Z/ d. j7 }9 F- z+ b& v    <i class="fa-solid fa-cloud" style="--i:1"></i>
9 [+ F- B' `: ?, S6 }& c" i& T    <i class="fa-solid fa-cloud" style="--i:2"></i>
; o! b4 k' l6 z' m5 }0 T    <i class="fa-solid fa-cloud" style="--i:3"></i>
- I! c2 j$ r4 J* v+ I) h    <i class="fa-solid fa-cloud" style="--i:4"></i>
    <i class="fa-solid fa-rocket"></i>
6 K: S$ K/ w  u  </div>
  <!-- 渐变色背景容器 -->
  <span><i></i></span>
" \/ Q% O' ~0 S</div>
/ [' ~7 d2 y& \& F6 H4 U
8 E2 E- G& C7 o. G! A1 t! S( x  U' B场景容器样式实现
: v. i4 N/ p& x8 P8 S5 ~/* 控制渐变色容器大小，也是整个动画的容器 */
.loader span {
  position: relative;
" ^$ }: }2 J4 w0 \* R$ {  width: 250px;
* O8 s5 I& V' t: J. u1 A+ z  height: 250px;
$ t" h6 \5 _4 w8 R/ p, b  background: #eaeef0;
  border: 6px solid #eaeef0;
( Q: |* I! A/ m  border-radius: 50%;
# U/ X( k; u  f$ P" t, N  box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
, e0 [3 M: b) G8 j. d- r}

/* 外层圆样式 */
* J4 S$ j5 S1 X* T.loader span::before {
' O' X4 V: [& I  B  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
' O9 n. ?3 r- h2 U- s  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
}

/* 内层圆样式 */
7 P: F5 x0 k2 N& ^/ i9 d% O3 ]" e& K.loader span::after {
  content: "";
  position: absolute;
  inset: 40px;
  background: #eaeef0;
1 G  q+ I6 U1 ]- s2 E* b  C  border: 3px solid #eaeef0;
$ N- i* ?: I& c$ p2 r, I  border-radius: 50%;
  box-shadow: -8px -8px 25px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15),
2 C1 [  e4 o! y4 f0 b3 [8 T1 u    inset 3px 3px 10px rgba(0, 0, 0, 0.15), inset -1px -1px 15px rgba(255, 255, 255, 1);
}
% y% \, v% m* e: A# R
/* 背景颜色 */
. [" M) q  t2 u+ w3 e/ c/ s4 _.loader span i {
4 K' b& k+ E8 L4 ]0 o: a( f5 T( s5 W  position: absolute;
  inset: 0;
$ B. H) X  K1 |  border-radius: 50%;
, p* X2 J; G' o. i: X  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
$ G# J/ R9 u9 D+ L$ F  /* 实现背景旋转动画 */
( r  E) @4 H5 v2 i4 \  animation: animate 1s linear infinite;
. B* F$ J0 O/ |- X  h}
/ _" h9 c3 g* S9 {  p9 Z5 t
@keyframes animate {
  0% {
    transform: rotate(0deg);
- y! z+ i, Q. O: L; e  }
  100% {
# P$ V3 n  k; k" X% U1 [' D    transform: rotate(360deg);
, ?5 J* ]9 r' S$ Y5 H  R; a+ Y5 |5 Q  }
}
% g; A+ U' |# r& y! q% B
# q" E3 E: e: r2 T) ~7 b
小火箭样式实现
.rocket {
/ ?/ T4 T6 ~# v- m$ ?4 f5 z) Q  position: absolute;
* }4 u+ N# }+ [" s  inset: 50px;
$ y& z( p( \" L- z( K% ~  z-index: 10;
1 w3 G# Q, }. i  display: flex;
  justify-content: center;
% q9 |# G8 K7 O- N) |  align-items: center;
  /* 设置装载小火箭容器超出部分隐藏 */
4 l1 K3 H( e& ]1 V5 q  overflow: hidden;
: m. P5 {: P# _, {7 }: L$ R/ x! h  border-radius: 50%;
8 x# f7 c3 f* f, M}

.rocket .fa-rocket {
; m' R; e& j4 l4 Q) s0 g  position: absolute;
  color: #ff518c;
  font-size: 3.5em;
  -webkit-text-stroke: 2px #000;
& w- Q" K( l. e$ B& t  /* 小火箭加速动画 */
  animation: animateRocket 0.2s linear infinite;
}

' ?! I3 y2 |# _, t' T+ G/ G0 Y% q@keyframes animateRocket {
  0%,
  100% {
  o7 i  S- j. `& ~) }    transform: translate(0px, 0px) rotate(-45deg);
1 l3 _+ U- s+ E% M( N. p  T  }
' [2 o) |( [; O4 E8 |  50% {
9 v) Y# s$ C0 v( p; |& G9 j. o    transform: translate(0, 3px) rotate(-45deg);
  }
}

完成上述代码后，效果如下图：
3 u  o- G0 I6 s9 l2 }云朵样式实现
( R+ j: X; @" m3 M; I% t.fa-cloud {
% \9 K3 V  l, @" E+ a* Q  position: absolute;
" d5 R7 g% e8 X; g0 u9 l  top: calc(35px * var(--i));
  left: calc(45px * var(--i));
  font-size: 2em;
( Y# `2 Z0 l) r; P  x  color: #fff;
  -webkit-text-stroke: 2px #000;
  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
- F9 \% |- r* J7 w: E/ _* t  animation-delay: calc(-0.5s * var(--i));
}
/ I# z  X- e  k. t0 C4 o7 m( R
/* 云层动画 */
! O. ]% a6 w; E  n" L; ^@keyframes animateClounds {
, q1 n3 ^. q0 w* a7 A. |. [# {  0% {
    transform: translateY(calc(-35 * 5px));
  }
* R$ G, S3 x. b  100% {
    transform: translateY(calc(35 * 5px));
1 J8 @  c$ s: P  }
}

6 @8 f5 Y, n7 y7 C9 Q2 a; a
( X* T- ?5 r* z  X0 g5 C0 _3 d: m
! `# w, G2 M4 }: }' L' ]7 R