CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
. @: n+ k& i4 t4 z, a" a! o效果展示
3 `2 s8 t( _8 U" s$ K( K
' A* v& P# [7 o3 s8 _
" t4 a1 p- J1 O6 k" s4 Q$ B0 ]7 ^3 x# fCSS 知识点
灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
动画场景分析
/ p; B: y, r$ o1 J5 l% S( Z从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：
$ j- ~. ?/ c, W* J6 ^& W3 u  F

, t/ ^2 U6 f7 \5 W! d
整体页面布局
+ `( W; v; |1 e8 n" J- d; d( k: w<div class="loader">
+ A' Z, g# @6 t9 Y) u7 A  <!-- 小火箭和云朵容器 -->
' u6 H$ [3 A5 W5 `4 y, D  I  <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>
  <!-- 渐变色背景容器 -->
  <span><i></i></span>
</div>
( ~. v" l6 Q5 A9 B
场景容器样式实现
$ V4 K# a0 k# h9 i8 Z) P/* 控制渐变色容器大小，也是整个动画的容器 */
.loader span {
# T/ K/ k; [1 R( ^  position: relative;
* ]& I3 v- c1 t( F; z1 S  width: 250px;
- ~/ o& p/ \/ k7 W9 g- I  height: 250px;
, B5 Y1 F4 V7 ~' Y  background: #eaeef0;
  border: 6px solid #eaeef0;
/ m& I) m5 c' V/ F& S  border-radius: 50%;
  box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
5 v) q* `- _! {5 ~& _/ S: M}

/* 外层圆样式 */
.loader span::before {
  content: "";
, t3 [* G$ {2 c6 @/ K  position: absolute;
, K+ w5 x( h& U* I. A  inset: 0;
  border-radius: 50%;
  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
- h+ M0 ~3 F. I: C}

/* 内层圆样式 */
.loader span::after {
. P6 f: z% B/ A, w  content: "";
) v: b/ I! q6 g5 U/ m/ Z  position: absolute;
/ L" r" l* K5 Q0 s! Y. n  inset: 40px;
6 R# X& E5 V( m: \# e' I  background: #eaeef0;
  border: 3px solid #eaeef0;
  border-radius: 50%;
. m; }+ k% }' _  box-shadow: -8px -8px 25px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15),
! w1 L7 _7 X% K% ^! M! W5 X    inset 3px 3px 10px rgba(0, 0, 0, 0.15), inset -1px -1px 15px rgba(255, 255, 255, 1);
}
" v1 X! ^; C0 v- h, @0 Q: X+ o* e
/* 背景颜色 */
6 |5 I2 O7 r; _. p; y1 f.loader span i {
7 n1 C1 d* M8 |( J3 E8 Q, S* _  position: absolute;
9 E5 k6 |' j4 e  inset: 0;
  border-radius: 50%;
4 U  v' L. Q! y1 u& D1 X; X  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
2 q: F$ ]7 u1 J( J8 E5 W- o  /* 实现背景旋转动画 */
: d  U+ Q& m1 T9 P9 R' G/ q  animation: animate 1s linear infinite;
5 i5 H9 \0 k5 g9 ^; A9 y% O}

! d, B) M# p2 n9 G@keyframes animate {
8 R# ?% L5 q1 D+ v+ A% s% t7 y5 t+ }8 k  0% {
$ X, _6 j( h0 e4 P* _    transform: rotate(0deg);
" i7 k$ S! ^9 x( o  }
4 i# c# k9 A1 O  B! i  100% {
! @# s/ J' I5 i    transform: rotate(360deg);
9 Z2 M3 |+ V( j- A! M* ?% ?2 y* y  }
" ^! z% p3 P+ U4 x- K& G6 O  Q}
; p; |; }4 j& |* S, T2 n& `2 h( a3 }

小火箭样式实现
.rocket {
  position: absolute;
4 x4 Y5 V" A+ w6 I  inset: 50px;
  z-index: 10;
" D/ l* c- \4 n5 ?" u0 m6 \8 W  display: flex;
  justify-content: center;
  align-items: center;
  /* 设置装载小火箭容器超出部分隐藏 */
* r; Q, D  _, C6 Y4 ]% s% D/ h  overflow: hidden;
7 u3 n( W+ Z0 A! ~- ]  border-radius: 50%;
* B- F9 i0 t! s}
* q2 e4 @; o( y7 c8 C$ u/ a. m
" ~' c; o9 l8 ]( q, c' l.rocket .fa-rocket {
5 |) e9 a& P# F5 V1 K, P; x  position: absolute;
; k! w3 n" q8 i/ _  color: #ff518c;
% N# C- c( M  M' d2 m7 b- \0 x  font-size: 3.5em;
  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
1 |4 Z9 f' P1 j  animation: animateRocket 0.2s linear infinite;
}
5 x3 h/ D6 X' v- b" x& k4 _
9 m1 Z% L$ H# m! t, Z: H! z@keyframes animateRocket {
  0%,
  100% {
    transform: translate(0px, 0px) rotate(-45deg);
  }
  50% {
6 B7 R3 v  `3 F$ v, ?8 J3 Z- E    transform: translate(0, 3px) rotate(-45deg);
  }
}

完成上述代码后，效果如下图：
, n$ u# x9 U" B/ E5 x云朵样式实现
& h0 g7 A) q( A% E+ V.fa-cloud {
  position: absolute;
9 ^- i) p, ]6 N! x6 J) x  top: calc(35px * var(--i));
) L& U& g$ f6 J) F. p# p/ y  left: calc(45px * var(--i));
$ w; g, O8 ^" j+ ^* B/ F  font-size: 2em;
: h3 V! ^$ y; t1 Z  color: #fff;
4 b6 J9 u2 a+ A  -webkit-text-stroke: 2px #000;
  animation: animateClounds 1s linear infinite;
, `- ~7 i" E  s6 z  /* 动画延迟 */
3 h- n5 w( Y( ^7 f9 K! z  animation-delay: calc(-0.5s * var(--i));
; \" E  J+ A; P/ \& X4 S9 }5 _}
# X3 U' b: r( K1 [7 }
# G  b5 ~1 z! [$ R  E, c. ~: S! ~/* 云层动画 */
@keyframes animateClounds {
  0% {
. r  N% h. A; k* D. B1 _8 ]) D+ h, G    transform: translateY(calc(-35 * 5px));
  }
  100% {
5 ?4 U2 J) d# E    transform: translateY(calc(35 * 5px));
/ S" r2 R0 M/ R4 t: y  }
7 e7 ]2 Q6 X) }/ P( f; x& c# V) I}


$ G4 ~2 R' F3 x, f% ]( f4 \- M