CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
效果展示


8 i" X( |  A0 c, {/ B5 ECSS 知识点
灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
- }+ e- o8 w3 y3 J6 Y) y动画场景分析
. [9 A! ^; `/ ^: G2 k+ T从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：
% [! j6 }( H8 i$ l


整体页面布局
<div class="loader">
  n& o# Q2 e% r; Q% O: g5 n  <!-- 小火箭和云朵容器 -->
, W# e; h7 \0 o3 j. x  <div class="rocket">
, G4 ~- o' w& a! `6 a- N! U* y9 F    <i class="fa-solid fa-cloud" style="--i:0"></i>
    <i class="fa-solid fa-cloud" style="--i:1"></i>
6 i( l# w( n9 ^/ v- P    <i class="fa-solid fa-cloud" style="--i:2"></i>
    <i class="fa-solid fa-cloud" style="--i:3"></i>
( G: o% u3 O% S: w    <i class="fa-solid fa-cloud" style="--i:4"></i>
, c8 [! J2 p: J# ], m! a    <i class="fa-solid fa-rocket"></i>
$ h; n6 f$ ]7 \3 ]* ]$ b  </div>
$ p, s) ~' f3 c, [3 k1 E  <!-- 渐变色背景容器 -->
  <span><i></i></span>
1 o; V2 K; j# Z6 r- `</div>
; Q' E; h% v3 N
场景容器样式实现
/* 控制渐变色容器大小，也是整个动画的容器 */
* ?3 ]3 n1 X" |2 [/ `; N$ }.loader span {
5 T% ~7 b" g. b$ Z# J; V  position: relative;
6 A% M7 N1 z% @. Q: }: a  width: 250px;
1 \" H6 G# U; Z) v  j  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);
$ T  E. l, e3 m" ?5 K7 R- G  s  overflow: hidden;
}

& K3 E. E, n6 A$ ?- X) j. K8 Q- }/* 外层圆样式 */
1 k/ \7 }4 b0 N.loader span::before {
  content: "";
' J0 ]1 J6 F% z9 [. x) @, c. ~. r/ x  position: absolute;
8 J$ `1 O$ V+ x' y* g  inset: 0;
  border-radius: 50%;
- q0 ]! }% B3 J2 {! d* ^/ i. w* D  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
; X# g6 Z+ T4 d4 q2 {  W}

; Z: R' k* O! [& ]* i/* 内层圆样式 */
6 ]4 Y9 U& |  s) ]- u$ N' _' V.loader span::after {
: \4 }0 x& f( y: u  content: "";
! e& B& d+ U7 I& T8 `6 v3 z# q3 r' [% ?  position: absolute;
" |; U0 j; K) |- x* E% ~  inset: 40px;
, O' O# _! R1 m5 G0 h! s  background: #eaeef0;
  border: 3px solid #eaeef0;
; }+ O9 Y$ o; D/ Z  border-radius: 50%;
7 p; E3 O; @5 f* z& |1 ]7 `  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);
}

/* 背景颜色 */
5 ^' |  a. c3 w.loader span i {
  position: absolute;
4 d! r5 M8 X$ r: J' A  inset: 0;
  border-radius: 50%;
  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
  /* 实现背景旋转动画 */
  animation: animate 1s linear infinite;
0 r4 B. a5 u( c8 m0 c  ?}

8 A3 p- L, h+ s* l; F7 k@keyframes animate {
# M" B7 c" h; c  0% {
6 v/ a3 }3 [8 H, g$ T! r2 L    transform: rotate(0deg);
; e$ p4 ^; k2 M! |/ W3 j  }
$ x7 K+ V1 w1 q) V- e# W  100% {
: M5 S" ^$ b+ @, d. p9 L, U    transform: rotate(360deg);
  }
}
/ i, ^9 Y4 w7 W, z( t: W

! N8 ~) O8 s: U' F4 k, x0 N小火箭样式实现
- b" U. M8 Q; p2 U$ G& t.rocket {
. Y( j* t8 B1 m/ Z! I/ V4 F: W  position: absolute;
# m$ c! A- I, ~$ {2 P+ S+ z  inset: 50px;
  z-index: 10;
  display: flex;
4 @& G# F; {4 P/ B, r' Z+ z  justify-content: center;
  align-items: center;
4 k( D) _7 E; h& r, R( O. A  /* 设置装载小火箭容器超出部分隐藏 */
4 y* U- z0 z; z& M- W; d4 h+ d  overflow: hidden;
( A2 W4 W/ |8 l  border-radius: 50%;
5 k5 }) U2 {% v}
/ V0 j( q' M8 p! {
.rocket .fa-rocket {
6 P! e& S8 F: l- N  d  position: absolute;
7 S  y+ U7 c; o  color: #ff518c;
  font-size: 3.5em;
  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
  animation: animateRocket 0.2s linear infinite;
}

@keyframes animateRocket {
  0%,
  100% {
( W2 a. P+ E  M( ]* M% }    transform: translate(0px, 0px) rotate(-45deg);
( g- M% H7 G8 y# S* a  }
1 m  F/ [4 u  I4 U# P  50% {
    transform: translate(0, 3px) rotate(-45deg);
: G2 l4 `) j$ Y# m" g  }
3 ]% t+ z' x- k2 O}

完成上述代码后，效果如下图：
3 y% D8 U) h$ m, I% ]云朵样式实现
% E0 m# _2 f3 U0 x; O) L- t" u.fa-cloud {
3 T) [; t% ?  n0 ]5 K* F7 e  position: absolute;
  top: calc(35px * var(--i));
  left: calc(45px * var(--i));
  font-size: 2em;
2 g3 i/ Q/ I2 F  color: #fff;
  -webkit-text-stroke: 2px #000;
  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
  animation-delay: calc(-0.5s * var(--i));
}

/* 云层动画 */
@keyframes animateClounds {
  0% {
# x8 n1 P' }& E    transform: translateY(calc(-35 * 5px));
( `! g3 A* S* \  B! m  g  }
" q3 }; v9 ~/ ?$ K8 y' U  100% {
! ^0 B: \, {7 x$ p7 r    transform: translateY(calc(35 * 5px));
# A: w* \* N3 l- R  }
}

1 ^% a# D- D6 A( g
/ V' m5 u& }6 N- z