CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
* x5 z! M1 I5 \/ k/ ?4 M5 A效果展示
6 ^+ S8 J( s9 w9 W, ~/ G4 @
0 E- ]- P1 \3 K' F1 b
6 `9 j9 J0 n, l$ {1 HCSS 知识点
灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
, x. R1 d- s. V3 @动画场景分析
从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：
$ q( a- \/ V3 j3 P8 e
5 k# Q* i$ N& Y: u7 r8 A  {& W$ ~
) g2 ?4 [7 x# {
整体页面布局
* a# }3 l0 H9 ]# Z0 n<div class="loader">
4 s& Q* B, n+ Q( d  <!-- 小火箭和云朵容器 -->
  <div class="rocket">
    <i class="fa-solid fa-cloud" style="--i:0"></i>
, R7 m9 s  k; i! O3 Z  O- |    <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>
: [$ R9 V* M! \: R  </div>
  <!-- 渐变色背景容器 -->
  <span><i></i></span>
  Y6 M4 U& k# x( F</div>

( }: G* `9 \6 c. z. s场景容器样式实现
: o7 O$ @! H4 G; U/* 控制渐变色容器大小，也是整个动画的容器 */
* w( Y% E8 @1 D# l4 }$ P2 Q* @.loader span {
  position: relative;
0 `$ F- ~5 e* i0 J& b( k9 c  width: 250px;
  height: 250px;
  background: #eaeef0;
1 c8 f: C5 l8 W; G/ y  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);
  overflow: hidden;
) A: ?" c6 T0 ]& }# x  W% r}
* ~' ]( s' l4 p# ^# a  B5 D
/* 外层圆样式 */
.loader span::before {
1 a# i2 }$ k% W/ y  content: "";
1 e# X' e. S& m& G% F  position: absolute;
  inset: 0;
  border-radius: 50%;
/ J9 D5 u; a! @* i* i  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
}
& O" j0 F0 h9 [; ^6 D, S
/* 内层圆样式 */
3 Q: o: H. G* h" O1 ].loader span::after {
  content: "";
% ^" ~2 f5 a2 H8 E' T  position: absolute;
7 B8 D; H; F6 H! G0 i  inset: 40px;
! }6 Z* j, p. [1 m  background: #eaeef0;
  border: 3px solid #eaeef0;
$ V5 C$ `! w/ [" Q9 w( |  border-radius: 50%;
  box-shadow: -8px -8px 25px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15),
, s+ ?- g: N! K( q; z/ O    inset 3px 3px 10px rgba(0, 0, 0, 0.15), inset -1px -1px 15px rgba(255, 255, 255, 1);
}

/* 背景颜色 */
.loader span i {
  position: absolute;
" ?+ Q3 Z2 L, x  inset: 0;
  border-radius: 50%;
  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
$ c$ q, g: j3 r. J8 _7 Q2 N2 I) @' b  /* 实现背景旋转动画 */
2 z! J* Z7 G2 p( l, }; |# X  animation: animate 1s linear infinite;
}

@keyframes animate {
  0% {
" n' b: f: Q0 B1 A    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


小火箭样式实现
.rocket {
) v/ M# W6 B' g' ?/ D% x- N  position: absolute;
  inset: 50px;
  z-index: 10;
  display: flex;
  justify-content: center;
# I( s/ a2 I0 ]% P% V& z$ U- f  align-items: center;
+ x  B- P# Q& h- z- y) q* S2 X! A# y0 s  /* 设置装载小火箭容器超出部分隐藏 */
( y/ t+ f' Q2 M& w  c) t  overflow: hidden;
8 n6 e) U! ]3 Y% l' a- i! {9 ~4 I  border-radius: 50%;
  \. x0 l  i( m9 o2 u7 K/ J4 @}

.rocket .fa-rocket {
, K$ R+ J* B6 a8 Q2 f4 v7 i  position: absolute;
  color: #ff518c;
  font-size: 3.5em;
! k# f! q' }5 T, |- q  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
  animation: animateRocket 0.2s linear infinite;
}

  M6 N) O3 }$ e1 i@keyframes animateRocket {
  0%,
  100% {
- g* i  d# R9 s) U    transform: translate(0px, 0px) rotate(-45deg);
  }
  50% {
) u1 u/ i& K; e' g    transform: translate(0, 3px) rotate(-45deg);
  }
}

完成上述代码后，效果如下图：
云朵样式实现
.fa-cloud {
& I8 r0 V1 N' X4 l$ V" W8 w  position: absolute;
  top: calc(35px * var(--i));
+ J2 L- `6 A( ^8 Z2 V9 d  left: calc(45px * var(--i));
  font-size: 2em;
, |1 p- e' {0 v# D1 J4 f  color: #fff;
( g. `* T- `/ D9 X1 ~+ X  -webkit-text-stroke: 2px #000;
  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
' T# j$ e3 T1 {2 e  B. I) k  animation-delay: calc(-0.5s * var(--i));
}

/* 云层动画 */
' f' T; V" J+ {2 O: k' A, _; Y@keyframes animateClounds {
  0% {
    transform: translateY(calc(-35 * 5px));
  }
  100% {
    transform: translateY(calc(35 * 5px));
; K6 e0 ^/ G+ J/ ]) h; V1 f2 S  \  }
8 ^! M9 x( _7 c' {( A. w}
' g! Q" G5 Y0 t# r9 `