CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
6 W$ S, f/ L& k* {9 E" R4 H效果展示
8 ^& t# _/ p, [+ U$ D5 H
0 M( b5 g0 F* ?0 B
CSS 知识点
2 X. y6 r2 K4 o$ @5 t1 e灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
6 ^% v% ?/ ^9 a4 Z, u9 E动画场景分析
0 r1 C, Z6 L  p" I9 l- j) V5 |- }  C从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：
, C5 }; M8 r. g3 U+ H0 r# V
  i; g, ?, r4 G1 m' I* o
8 I6 D1 p" B9 Y, B  ~* E
, `# T7 B, d4 |* O+ B* x整体页面布局
) c1 J* I7 j. e! \<div class="loader">
  I! V1 _% {  m: ?  <!-- 小火箭和云朵容器 -->
  <div class="rocket">
6 n2 p0 w6 f0 o5 ~; Y  c6 E    <i class="fa-solid fa-cloud" style="--i:0"></i>
: C  S0 y( e" z  b) [, f0 m    <i class="fa-solid fa-cloud" style="--i:1"></i>
    <i class="fa-solid fa-cloud" style="--i:2"></i>
/ c/ t+ Q1 k8 J. [/ j6 |* c    <i class="fa-solid fa-cloud" style="--i:3"></i>
1 Q6 N: C* r3 O- [* W    <i class="fa-solid fa-cloud" style="--i:4"></i>
7 ]7 f' d9 f( {: g4 S0 I, H0 k    <i class="fa-solid fa-rocket"></i>
  </div>
6 E( d, e6 ~; Y$ i$ O) ]; e  <!-- 渐变色背景容器 -->
+ n4 M2 T( O$ ]* L+ ~0 _/ E  <span><i></i></span>
! _& y. v& ^8 o</div>
  \8 `* Y5 J+ g7 b3 c, l+ O
场景容器样式实现
5 ]) _3 \% D6 M( I& g- ~/* 控制渐变色容器大小，也是整个动画的容器 */
/ B3 Q7 J" @$ z4 `  K" W! S.loader span {
9 b8 Y" D5 ~: @$ Q  I$ X4 ]% e  position: relative;
8 e" S8 d! W  t  width: 250px;
  height: 250px;
  background: #eaeef0;
  border: 6px solid #eaeef0;
6 B$ A0 L6 D# E' `1 O. ]$ K  border-radius: 50%;
' b% r8 n+ B2 _7 r* e' q. ?  box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
: V' {% d9 k2 v( ^$ x! z  overflow: hidden;
}

/* 外层圆样式 */
# j( P* p& H/ |- c+ k.loader span::before {
  content: "";
3 v) m5 a; Q4 N- K9 G  position: absolute;
2 ?; D8 u3 g) D5 i8 N. X7 J9 P6 z  inset: 0;
  border-radius: 50%;
" y, V2 Q9 D' D4 Q8 h( Q  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
: T, |% e/ N4 P1 I( y+ h0 m8 ]}
8 u2 P3 D5 h. q
/* 内层圆样式 */
* ^: G4 L/ ^; V1 S* J( O0 w.loader span::after {
  content: "";
  position: absolute;
  inset: 40px;
+ ~6 t# w% Y0 t$ G1 p  background: #eaeef0;
( o8 W: c6 z- k$ k1 r9 V  border: 3px solid #eaeef0;
* T/ ?- v. r" U2 S6 q* ]2 U$ Z  border-radius: 50%;
+ L2 z% o9 d& B  B8 K# k, t8 e  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);
: n3 @% {( U% R# n}
+ w/ f: Z: ]" _+ q# V6 [% e
/* 背景颜色 */
.loader span i {
6 e# i; x* U! g8 f  position: absolute;
  inset: 0;
; c; w. U% r/ ?) \: A2 |) D* a  border-radius: 50%;
  q9 Y  @( U: N  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
1 b+ h! v% a# Q" j  /* 实现背景旋转动画 */
  animation: animate 1s linear infinite;
}
9 }) Z7 ?# m/ `! I) F/ h+ X
9 K# @6 a; }2 [# X@keyframes animate {
  0% {
    transform: rotate(0deg);
. u& S" I; N+ C  }
6 w; }6 i' P& X0 \  100% {
, L2 V4 l1 \9 T4 u    transform: rotate(360deg);
  }
}
9 s0 ]1 j9 j% K! s  f; J

& Y6 W8 p2 Q1 w7 m9 n小火箭样式实现
.rocket {
2 m: \( e2 n! e  position: absolute;
  inset: 50px;
  z-index: 10;
  display: flex;
6 Y  K! N* F- e7 }6 B  justify-content: center;
6 G) v; g' A* r/ q  align-items: center;
: H  g( e" ?) M$ z* Z* w3 T  m  /* 设置装载小火箭容器超出部分隐藏 */
  overflow: hidden;
5 Q4 A$ I* t5 ?8 w6 a  border-radius: 50%;
}

9 A, T/ R; i& g* }( i1 ?1 A.rocket .fa-rocket {
  position: absolute;
  color: #ff518c;
4 [3 X7 u) ^* Q% h0 s! u  font-size: 3.5em;
4 |0 ]+ V& o# C. k8 r  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
  animation: animateRocket 0.2s linear infinite;
/ ^4 w) t" a- Y$ c- |2 w) F}
& A- p' P& D% R! p: K) ]4 w! e
@keyframes animateRocket {
  0%,
  100% {
; x6 a* U6 }6 f; r8 C    transform: translate(0px, 0px) rotate(-45deg);
  }
6 L( r. W" i! l: N  50% {
9 v" d1 T' h2 k/ K    transform: translate(0, 3px) rotate(-45deg);
8 @2 x. F. B% i( n  }
# b- f$ r9 _- a- a' [5 }7 ~}
2 J* {4 j+ j4 Z/ G- w) |6 `5 i
完成上述代码后，效果如下图：
9 e% x: S6 A! w云朵样式实现
1 X- F8 g+ B9 O% i& t1 X.fa-cloud {
: m8 w# C4 ~! \0 d  position: absolute;
* ~9 u$ C! g7 A5 f0 K  w) o! b  top: calc(35px * var(--i));
9 I  p+ S" k+ `9 \- n  left: calc(45px * var(--i));
: p; L9 N$ r3 I* N  font-size: 2em;
$ o9 |) Z, x: j( J3 B; F- L  color: #fff;
) Z% ]) M2 Q! s3 v$ m  -webkit-text-stroke: 2px #000;
" N% H. F6 F) |$ B% h7 G1 K% A9 b) H6 e  animation: animateClounds 1s linear infinite;
& x0 c0 m+ L1 f6 p+ a$ ^- H( ^  /* 动画延迟 */
' A% n% F' l! g6 z& c) s  animation-delay: calc(-0.5s * var(--i));
}

/* 云层动画 */
@keyframes animateClounds {
  0% {
    transform: translateY(calc(-35 * 5px));
* W% n% j8 F1 J- v4 ]3 y3 H0 L9 H  }
  100% {
" c$ k; B: z2 Z+ G5 P    transform: translateY(calc(35 * 5px));
  }
}

1 n5 D7 E) Q9 s9 U
6 a8 ^9 s; ]- [  S/ N7 ?
7 Q" l! C, o. d6 j3 |