CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
效果展示
0 n0 K7 Y  i8 w& K! z

" a6 q7 A+ q# q7 o+ x. UCSS 知识点
/ Z. `; I- h, f( C$ Q! @5 e灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
* ~- {# o5 F. k% s0 `' G动画场景分析
从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：

2 [* P% Y: m/ M
6 j) L0 o& l' o3 _& y5 v- \) {
整体页面布局
<div class="loader">
  <!-- 小火箭和云朵容器 -->
& E% C! N% p# _* C/ P! S* b6 {  <div class="rocket">
/ ]) W( q  U( M5 R0 H  a    <i class="fa-solid fa-cloud" style="--i:0"></i>
+ T6 y0 [2 [2 a2 j# b    <i class="fa-solid fa-cloud" style="--i:1"></i>
    <i class="fa-solid fa-cloud" style="--i:2"></i>
9 `" c$ A' @7 K/ @1 Y7 i$ b    <i class="fa-solid fa-cloud" style="--i:3"></i>
    <i class="fa-solid fa-cloud" style="--i:4"></i>
4 X* ~* F0 [$ _' k# B+ ]+ P, e$ q: d1 j. g    <i class="fa-solid fa-rocket"></i>
  </div>
# G4 i) }; ]) i4 H- V$ F  }+ B3 z  <!-- 渐变色背景容器 -->
5 q% h% Z" e; K; A. n/ G/ l8 u  <span><i></i></span>
0 k8 [. D. i- j" g8 l: U5 F</div>
0 p- t% @/ i5 L# `' N) a: F# Q
场景容器样式实现
/* 控制渐变色容器大小，也是整个动画的容器 */
9 E' P! s' w3 d' [2 e" e.loader span {
  position: relative;
  width: 250px;
: b4 _! r; \0 i' \  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;
# X) t) ]3 ^9 b: D}
1 j. O  Q* A. R' V
7 D" R, Q( B7 t$ A, @2 Y/* 外层圆样式 */
. S# v; }; W9 S! T: N  D6 b$ l.loader span::before {
  content: "";
/ N, D6 H9 M3 a: u3 |3 C  position: absolute;
  inset: 0;
  border-radius: 50%;
6 a7 {4 L  J& S/ I, M* _3 S* _  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: "";
# o* P& ]/ M- J6 Z. x  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.15),
8 C# \! D/ r( N+ a    inset 3px 3px 10px rgba(0, 0, 0, 0.15), inset -1px -1px 15px rgba(255, 255, 255, 1);
}

! S9 P* l) h" |4 m0 x/* 背景颜色 */
8 v+ O; J3 m6 J0 D, Q  \2 D.loader span i {
  position: absolute;
$ F  e$ _0 V1 m1 D. {* C+ [  inset: 0;
9 Z5 y3 G0 Y- R# z$ S6 B  border-radius: 50%;
- d/ [/ a- C! F3 o) J& X3 G  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
  /* 实现背景旋转动画 */
0 C: _/ }4 f. E! `  animation: animate 1s linear infinite;
4 X2 a6 B) p, x2 C9 d. I}
- i/ v5 G: J5 @  o1 g7 d. G& Z
@keyframes animate {
9 w: Z, J8 R9 m. \! C  0% {
    transform: rotate(0deg);
" z2 m2 r2 S9 j  f) Y. L; b% p  }
  100% {
! e0 P) t* {, z% Q6 Z    transform: rotate(360deg);
! l. C, t1 Q! H) D6 e0 j+ g8 a  }
/ Z. Q. V; x8 h0 u6 v}


小火箭样式实现
& i; l! ^* g5 Y* m.rocket {
" }$ J9 ]" r  K/ q$ G. G  position: absolute;
* a3 H' J' b# `7 D6 w6 d" E7 O  inset: 50px;
2 U, t9 Z; T. E$ e* _- S  z-index: 10;
  display: flex;
, p, t! u+ v6 Y! T$ l( X( d4 G: S  justify-content: center;
  align-items: center;
' W4 {2 S# O! R  `/ X! w  /* 设置装载小火箭容器超出部分隐藏 */
9 M8 c9 F; h4 {2 O5 {; d# O  overflow: hidden;
% v) i$ j2 K  C  border-radius: 50%;
. V. d- B: F" }' |: w" {9 f}
6 s2 |. d: O% H) Q
.rocket .fa-rocket {
  position: absolute;
  color: #ff518c;
' u+ V9 [4 ^( C- e  G  font-size: 3.5em;
  -webkit-text-stroke: 2px #000;
! y: ?9 [4 a1 M2 S7 i' z% y  /* 小火箭加速动画 */
  animation: animateRocket 0.2s linear infinite;
" q+ s; B# E- i' ^1 P2 P}
; V9 {2 [" s3 h+ s
@keyframes animateRocket {
% a, e5 F# ^* A- K3 y1 X: ?( H$ n7 i  0%,
% l0 O! V4 @; _' D  100% {
    transform: translate(0px, 0px) rotate(-45deg);
  }
  50% {
    transform: translate(0, 3px) rotate(-45deg);
, ^" B. F: _9 u- ~8 v) f6 R4 s  }
+ _. q4 j8 ^& z- O0 `}

- C3 }  h9 B8 ^3 N% e5 \: ?, @2 \  T! x完成上述代码后，效果如下图：
云朵样式实现
' V6 U5 L' Z' C: H. {.fa-cloud {
4 W6 `  z* T( }% A% A  position: absolute;
2 A* `9 |, ]  U! J  top: calc(35px * var(--i));
6 ]9 r* x, H9 }5 H  left: calc(45px * var(--i));
  font-size: 2em;
' t$ I: U. P7 y# `/ g  color: #fff;
  -webkit-text-stroke: 2px #000;
  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
/ c/ H+ i0 v+ W9 y" ^+ @  animation-delay: calc(-0.5s * var(--i));
}
+ j  k& W0 V% o9 b+ C* V. b- c
9 C# ~; i5 A6 ~$ P  N6 z5 K" @4 A/* 云层动画 */
9 E6 X- l+ N3 ]: m" e7 x- H@keyframes animateClounds {
- M6 T8 O& N! ]7 z! m. I+ x0 ]  0% {
    transform: translateY(calc(-35 * 5px));
- I. D$ n6 d4 i1 P: b1 _  }
  100% {
    transform: translateY(calc(35 * 5px));
  M( S5 J) l# ?! w  }
}

1 ~$ M" T& N# e, o: N
+ m" N& w8 N( o$ a; M/ u) Z' f
9 ]) H$ T( {4 m4 V