CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
! p: i7 T( u* e( Y: R效果展示
* l, j: U/ h, S& d, t) C- d& B

CSS 知识点
灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
动画场景分析
从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：

; |* ^4 i' @  u) \

整体页面布局
, _9 E4 c8 G* q<div class="loader">
  <!-- 小火箭和云朵容器 -->
5 w# q! s3 _5 K  <div class="rocket">
- }# q. X2 M+ y, ^. b: ~5 _# @    <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>
1 {" X7 y. j' v# r3 B, h    <i class="fa-solid fa-cloud" style="--i:3"></i>
- i/ m- M5 N" Y& Q4 ^    <i class="fa-solid fa-cloud" style="--i:4"></i>
    <i class="fa-solid fa-rocket"></i>
: G% {5 d; k8 \: h' D: S8 j  </div>
  <!-- 渐变色背景容器 -->
  <span><i></i></span>
; b% B4 n; a' r</div>

! W$ O6 s# [7 e场景容器样式实现
/* 控制渐变色容器大小，也是整个动画的容器 */
.loader span {
  position: relative;
4 |" P& |! X) k  width: 250px;
  height: 250px;
+ O! L3 P4 Y3 z8 q  G8 X( c  background: #eaeef0;
  border: 6px solid #eaeef0;
4 Q4 o5 [+ R, n: h: h8 k  border-radius: 50%;
  box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
: q. w: Z1 L3 v3 t' G  overflow: hidden;
! a6 Y' f9 d, }6 [/ w}
6 t" y+ G7 U0 W+ U- ^1 ]. H8 p
3 U$ A, g% [* l  N# a. m/* 外层圆样式 */
.loader span::before {
2 G  y* I; M- a  content: "";
  position: absolute;
+ F' q4 [# ~& ^% N  k3 H% h4 K  inset: 0;
" h, s  z- V1 E# d, e. ]9 K' H  border-radius: 50%;
* R3 d' \  H, H) ]# p: g( V$ R  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
}
7 C4 W! j  A1 d3 O; C: M
/* 内层圆样式 */
.loader span::after {
9 D! a" }+ T% f* \  content: "";
; f8 `, X& i. z; B  position: absolute;
  inset: 40px;
  k% D. |# u# {% R4 T  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),
    inset 3px 3px 10px rgba(0, 0, 0, 0.15), inset -1px -1px 15px rgba(255, 255, 255, 1);
. }3 r, U* s# |) H: N  @. ~+ A8 ?}
8 _6 Q# c8 _- r  z" X) D, Z
/* 背景颜色 */
.loader span i {
  position: absolute;
  inset: 0;
) S0 W1 X1 N( I1 R8 }2 R; @2 V! J1 s  border-radius: 50%;
- Z7 I- ?# g, M4 j* a  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
  /* 实现背景旋转动画 */
! Y3 `: W4 M9 J: v  animation: animate 1s linear infinite;
; H& b! ^; j( e) Y( V}
" _: B% K; U  v+ m% s2 ~
* h5 s4 R6 i0 V@keyframes animate {
  0% {
/ i# X' v; F7 c; j    transform: rotate(0deg);
6 b. r+ U! w5 Z6 O$ o& `  }
4 U/ D+ g4 q" U  s$ X5 k' K' U: I1 c  100% {
+ X% u( Y: \4 }( P% J& J    transform: rotate(360deg);
  }
}

" \3 w0 ?$ P- D4 \
. L% `+ U' H, e6 X2 i! o小火箭样式实现
2 k9 X  P2 N! ~) r: z- t! y.rocket {
! y/ F1 i" v) ~$ I1 v- K% R  position: absolute;
  inset: 50px;
  z-index: 10;
  display: flex;
; y4 V  p1 A/ J2 P. u  justify-content: center;
  align-items: center;
: i& e( m/ N# H! c$ s  /* 设置装载小火箭容器超出部分隐藏 */
- V1 D0 l6 k$ s  overflow: hidden;
, i/ l& }! o; |  border-radius: 50%;
1 b" |4 z  ^/ L, h. _2 j% L}

- m: p& O2 B$ `. c2 k5 D.rocket .fa-rocket {
  position: absolute;
# k- |. V, H: q  color: #ff518c;
: l! f$ n5 y7 F5 e, o% {  font-size: 3.5em;
* c: n# H5 X0 ?  n5 V9 v  -webkit-text-stroke: 2px #000;
: L  l) a9 ?$ W4 Z6 D/ \  /* 小火箭加速动画 */
  animation: animateRocket 0.2s linear infinite;
" {1 ?- o0 Z" t5 T- R' w8 T+ x}

% a) V% |# G, \2 r( I0 l@keyframes animateRocket {
  0%,
  100% {
    transform: translate(0px, 0px) rotate(-45deg);
. z; O' C: t0 k9 l4 h0 N4 \6 z  }
  50% {
! z) Q6 \# @- W+ e3 B; R    transform: translate(0, 3px) rotate(-45deg);
0 S; H2 t. \1 m5 W5 O$ Z6 p+ p' [  }
}

7 o* ^6 m# H$ k; `完成上述代码后，效果如下图：
云朵样式实现
7 m" y+ t3 w* z+ n% m.fa-cloud {
  position: absolute;
3 p! R& U1 i. `7 S9 I% m% N. G! J  top: calc(35px * var(--i));
. Z2 y$ l" x; L3 y  left: calc(45px * var(--i));
  font-size: 2em;
  color: #fff;
  -webkit-text-stroke: 2px #000;
  animation: animateClounds 1s linear infinite;
' F5 t: r) L+ R; h" j  /* 动画延迟 */
  animation-delay: calc(-0.5s * var(--i));
}

! F5 v; j% }" p9 n3 _( I5 q, o( j/* 云层动画 */
2 k8 M& R1 U2 H4 Z  {@keyframes animateClounds {
  0% {
    transform: translateY(calc(-35 * 5px));
  }
; l7 r! q& \4 d6 ]3 x  100% {
9 U( J  g) U% y$ e' M' y    transform: translateY(calc(35 * 5px));
# J2 @& L1 x0 c1 g( d+ T5 u  }
}


; z' M( Q4 e8 k% O1 ]7 O3 U
5 H" l, k0 h0 f1 V) B9 E% |' e- ?