CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
+ Q0 d% k5 A3 }4 ^# l! G效果展示


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


  h& f1 w. U1 h
7 s6 l; n/ K# K, y" R整体页面布局
<div class="loader">
% N, D5 N5 U0 T  <!-- 小火箭和云朵容器 -->
  <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>
8 ?% U4 J! ^" Y+ q. V9 ]( s* Y6 K    <i class="fa-solid fa-cloud" style="--i:4"></i>
% Z3 B* B( W" K5 X& ^. M    <i class="fa-solid fa-rocket"></i>
  </div>
  <!-- 渐变色背景容器 -->
) M8 _* {& i8 Y6 P& M; j" t! X  <span><i></i></span>
. Z: [$ Y: l" U1 U0 S" J! q</div>
) V+ d4 F# j5 c$ p  |: [2 }0 ~
1 U- b+ i& K* |) d. Q2 U% x) T场景容器样式实现
" j% N$ y/ O, }3 ?0 k/ q/* 控制渐变色容器大小，也是整个动画的容器 */
6 ~8 t9 x- @: f1 r6 v  I: m.loader span {
+ N: q% g1 D" }7 g  position: relative;
  width: 250px;
  height: 250px;
" U- |# N- Z- _" \& D4 H5 K  background: #eaeef0;
  border: 6px solid #eaeef0;
  border-radius: 50%;
2 x# O( u# k* @, v! M5 d" C  box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
& H9 [3 b/ s8 B! c+ q
) @$ R7 m9 K: I( _& `, T/* 外层圆样式 */
3 x' h: `2 W3 Z1 w( @* g.loader span::before {
  content: "";
8 a! L; p: K$ Q  position: absolute;
  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);
}

/* 内层圆样式 */
.loader span::after {
  content: "";
( f' e0 y4 M& K& k, e  position: absolute;
' b0 }; Q) P* J5 B" p  inset: 40px;
  background: #eaeef0;
  border: 3px solid #eaeef0;
9 s4 L( x* s" B) h" C  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);
6 a3 K8 f* d6 b. }' h# B}

/* 背景颜色 */
# f: m0 x) Z* B6 y1 {8 z/ I.loader span i {
. x# u4 c! n0 q3 T  position: absolute;
  inset: 0;
/ e6 V) u1 r# K: w3 D! ^, O  border-radius: 50%;
! T6 x( P& [5 U/ \* |  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
1 N: k0 o5 i3 p5 X9 A9 F  /* 实现背景旋转动画 */
% v& b; x1 y% x6 m  animation: animate 1s linear infinite;
4 ?- O3 m2 N  v- @}
: m1 t8 q1 g" S) o
- e: B4 n7 y4 Z( }  m$ e' K@keyframes animate {
  0% {
$ Q8 M, Q  Y6 k; d/ T    transform: rotate(0deg);
3 e+ u0 [, U2 `5 G# }( T0 G1 g0 p  }
3 o; c; K/ y% i. L2 Y! _+ m  100% {
    transform: rotate(360deg);
  }
}
9 G4 g7 n) ^1 j; G6 J, x

& m7 C* A% W' i& _& B小火箭样式实现
9 ]3 I$ y; G; s& y0 f7 w/ b" _  k.rocket {
  position: absolute;
' q* d7 {( y! q% s  inset: 50px;
+ m5 T) p0 M" s# w1 S, H  z-index: 10;
  l# n6 t# N( x  display: flex;
  justify-content: center;
  align-items: center;
3 J) m& Z$ w- W3 }/ E  /* 设置装载小火箭容器超出部分隐藏 */
: o) g$ u" l8 o0 w: d8 m& |! j: c  overflow: hidden;
  border-radius: 50%;
" b$ i0 |0 b) Z+ I  X}
/ q# |1 j  P( I5 Y& x# n
% \" _# J# ^) z.rocket .fa-rocket {
  position: absolute;
  color: #ff518c;
  font-size: 3.5em;
0 A# x& s' n; J! O  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
  animation: animateRocket 0.2s linear infinite;
}

" d( d) O5 O( W% A6 C: o@keyframes animateRocket {
- J  x& D3 c4 s! M: O3 _& F  0%,
  100% {
; u+ Z( k, V8 o    transform: translate(0px, 0px) rotate(-45deg);
8 `0 M' r9 x; l* E+ |* `  }
  50% {
& q3 w  `8 F* Y( p3 B    transform: translate(0, 3px) rotate(-45deg);
9 F, s  L7 b1 s) A" L  }
}
6 k% ~4 B2 t  r5 _6 }; H
( V% ~: u3 ]. N5 l2 r$ q完成上述代码后，效果如下图：
( k2 n/ n. R- R5 X2 q: L& \1 q1 L云朵样式实现
.fa-cloud {
  position: absolute;
  top: calc(35px * var(--i));
  left: calc(45px * var(--i));
0 z4 B4 @8 v3 b) {+ B- s  font-size: 2em;
% u' r- R4 W, E' `6 t  color: #fff;
6 h5 C+ ^* W: |/ S9 s  -webkit-text-stroke: 2px #000;
  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
  animation-delay: calc(-0.5s * var(--i));
}
+ r# j( y% T9 e0 i
/* 云层动画 */
@keyframes animateClounds {
& E  C" p$ O- \9 v2 L8 b  0% {
; t( |! V' P; R. L    transform: translateY(calc(-35 * 5px));
  }
7 ~% R/ R4 h; g: [  100% {
    transform: translateY(calc(35 * 5px));
  }
+ O- K6 T9 y" s}

1 W7 o9 Q2 @1 l. [
0 s- b$ y! }. r8 N* `