CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
效果展示


( ^! n5 H; |% RCSS 知识点
* `8 o( @* @8 s2 G5 c1 P$ N灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
! i) i! Y4 v' W' s) u# J动画场景分析
从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：
# Z( G: j; ~4 W- u* h4 |& o! I3 c" ?


, f: N5 t2 u1 f  D! K" @! Y整体页面布局
<div class="loader">
  <!-- 小火箭和云朵容器 -->
* f& T. w! c$ X1 }- H. ~  <div class="rocket">
/ J5 i% u: u5 t& o3 z    <i class="fa-solid fa-cloud" style="--i:0"></i>
* H0 Z& Z# O1 X% t0 t4 p* y    <i class="fa-solid fa-cloud" style="--i:1"></i>
+ y( |9 E$ s8 v8 \8 R+ Y, w5 u# }    <i class="fa-solid fa-cloud" style="--i:2"></i>
: ~: K6 I# R, g    <i class="fa-solid fa-cloud" style="--i:3"></i>
# m. b/ \4 S, J, o% ~: y    <i class="fa-solid fa-cloud" style="--i:4"></i>
    <i class="fa-solid fa-rocket"></i>
  </div>
  <!-- 渐变色背景容器 -->
- ^; `) g& p, P2 @3 ]1 w5 Q2 X2 F  <span><i></i></span>
</div>

/ ?* n% H! C' Y- E% r& K场景容器样式实现
/* 控制渐变色容器大小，也是整个动画的容器 */
.loader span {
. T3 F# z  s0 g  g3 b# v  position: relative;
! e& v0 ?. u6 ]% t2 b. d  width: 250px;
  height: 250px;
  background: #eaeef0;
  border: 6px solid #eaeef0;
  border-radius: 50%;
2 W9 G9 Y! N& X) P3 s9 g  box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
( [& z1 G/ s* O* J  overflow: hidden;
, i9 c4 v& L2 p' H4 G8 l/ i}
$ Z7 ]7 K8 e9 a* b! p) y% E# Z
/ A" @$ B* Q8 a: Z, Q+ w- z/* 外层圆样式 */
.loader span::before {
  content: "";
! x$ x( v8 {6 D  B6 W- A# d# |! D0 F  position: absolute;
  h0 M: e) j; c6 v& A7 ?9 X$ w/ U  inset: 0;
6 B9 F+ y2 \  V& |+ d$ b  border-radius: 50%;
& ~7 [/ h( }6 V4 s6 i  j: r  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
5 _$ ]* N' r2 x. [}
& Y# Z# [6 s' }( Z. ~' |. h
* g+ g5 b1 f1 K6 q6 h/* 内层圆样式 */
% A7 [9 f$ J0 j6 T! q.loader span::after {
- O7 g; a% L- Y( ]# h  content: "";
' d2 p/ R! n1 ^; D* _% V  position: absolute;
  inset: 40px;
  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),
& O- e4 s  ?, r6 l' t- A8 t. Q0 X+ m    inset 3px 3px 10px rgba(0, 0, 0, 0.15), inset -1px -1px 15px rgba(255, 255, 255, 1);
}

( [5 ]7 U; i9 S/* 背景颜色 */
.loader span i {
  position: absolute;
  inset: 0;
, Q/ r2 e& c, E0 ]1 G  border-radius: 50%;
) i7 \* i" l" x7 S- S0 S% T  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
  /* 实现背景旋转动画 */
  animation: animate 1s linear infinite;
0 M0 p+ v* S1 g" R7 y}

@keyframes animate {
* b5 \) d5 ~- k( d; F! Y  0% {
8 g( L  Y+ r. v% j    transform: rotate(0deg);
  }
  100% {
: [, ?" U" w/ I  p: B3 @    transform: rotate(360deg);
  }
}


+ i) n$ W9 n8 @1 T9 f3 ^小火箭样式实现
, e' Y' i2 P# R& a) T4 a.rocket {
  position: absolute;
  inset: 50px;
  X6 T. {! }4 ^6 e. q! P, `9 i) E$ l  z-index: 10;
, h# ]9 `: p2 u6 \/ H6 T- M  display: flex;
  justify-content: center;
4 l1 J/ I: w$ ?7 E3 }0 ~- S  align-items: center;
; P  P/ h; }3 f0 q: w; S4 b- A( X  /* 设置装载小火箭容器超出部分隐藏 */
  overflow: hidden;
) j3 X. D5 ?6 g" ~( N4 D  border-radius: 50%;
; ?/ B& Q0 B5 l}
( c, k; o4 q7 [% L9 W
/ ~! Y, G2 j: H! m( u* i.rocket .fa-rocket {
; s1 b/ D  I. w  position: absolute;
  color: #ff518c;
  font-size: 3.5em;
  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
+ b9 S# N% _1 s8 r  animation: animateRocket 0.2s linear infinite;
}

@keyframes animateRocket {
1 R+ |& q6 q9 J* T. u2 U. ^  0%,
  100% {
2 ?8 R; p# l. a1 T. q    transform: translate(0px, 0px) rotate(-45deg);
  }
2 |) ?) `3 q8 z1 ]' c! \8 n$ L# i  50% {
    transform: translate(0, 3px) rotate(-45deg);
; Z- Q( }; s8 M! P7 A4 L/ t7 S  }
& e1 q0 I) r" x; s; p}
* [; c' L" w( c) o+ P! i
完成上述代码后，效果如下图：
% M  M+ A; n+ P5 q云朵样式实现
  z/ `* \& D- R2 A* \.fa-cloud {
  position: absolute;
: F: b4 s9 |3 Y3 z  top: calc(35px * var(--i));
5 H0 _4 p% |* l5 O7 W' `  left: calc(45px * var(--i));
0 L# [/ d$ Q* _5 _: A  font-size: 2em;
  color: #fff;
  -webkit-text-stroke: 2px #000;
8 T( @) R) t7 b  M% |  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
  animation-delay: calc(-0.5s * var(--i));
6 T: g6 \, ^0 N6 a  _$ L% K3 @}
5 l0 g. ^* v! p. J3 K: R+ D3 B& {
, m' [- c" \2 q2 m: L/ t/* 云层动画 */
+ y) j- Q, E2 P0 A  d( k$ D@keyframes animateClounds {
$ e  ?; h0 m# H% S/ m) E0 y$ v9 R  0% {
    transform: translateY(calc(-35 * 5px));
2 Z# g7 o& C8 r; w6 ~  }
4 E' j9 F  u3 W% ~- B/ `# t  100% {
; N; c+ U3 M* w# f+ k7 O    transform: translateY(calc(35 * 5px));
+ e) r) S3 S4 U# Q. ^  }
}
) i; Q; D3 \! K; P( m

3 K) F2 A6 r4 @5 B# g" w: J