CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
1 U9 L1 Q- {" W8 a效果展示


; c! b/ Q' ]; J: @1 I* Q* UCSS 知识点
( f+ v: D/ j8 @% l8 a) p" i4 ^灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
动画场景分析
从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：


/ e2 d( e# K0 ]8 H
- B9 ~9 d0 w7 a! s# B8 w/ X% i整体页面布局
+ o- E$ B! M; s- I. r( O<div class="loader">
  <!-- 小火箭和云朵容器 -->
+ c* U4 K" P( C% c  <div class="rocket">
. H6 h: N) Y$ A+ V! I. N    <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>
( T8 m/ p$ \  D: T: V    <i class="fa-solid fa-cloud" style="--i:4"></i>
' S) n7 i5 q. N. |    <i class="fa-solid fa-rocket"></i>
  </div>
  <!-- 渐变色背景容器 -->
  <span><i></i></span>
</div>
9 E. L9 n/ g4 s
场景容器样式实现
/* 控制渐变色容器大小，也是整个动画的容器 */
2 {6 S: z! _' h4 F! K) `.loader span {
; N1 J4 Y6 t- h/ B# R' G  position: relative;
  width: 250px;
# b* Z0 N$ t3 D& y  height: 250px;
0 e  K' A8 x$ ]+ h# Y8 r4 e  background: #eaeef0;
% t! n, I3 E! ~- S* |' d3 l$ B  border: 6px solid #eaeef0;
7 Q2 x) Y7 p$ d7 o$ A  border-radius: 50%;
; B" d+ o% u" u  box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
9 x" `8 n% t) ^- P& R, {  @
/* 外层圆样式 */
7 t5 x2 N( G" ~/ T5 @, h.loader span::before {
$ k) B( `& L8 a  content: "";
8 {5 ?+ S5 B8 L3 |2 Z9 A3 _  position: absolute;
& R2 a# }$ f! e, Z2 C  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);
}
3 @' D' u* ^' i+ z! U/ A& y& D, Y: i
# ?  V; ?% f1 g+ R( k6 B/* 内层圆样式 */
.loader span::after {
  content: "";
6 b5 ^+ G+ K9 [( r* n# j$ \  position: absolute;
6 G1 Q) R* }! R, d  S9 h  inset: 40px;
  background: #eaeef0;
3 h8 O+ s3 I& a' i# a+ C7 X% J. s  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);
$ I5 K+ W- p9 Y; g) t}
5 a/ b; t! p* U9 Q( V
/* 背景颜色 */
. G; |% C* w  K! w: j5 Y.loader span i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
: |0 A5 B% l" ~7 ^. B  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
  /* 实现背景旋转动画 */
  animation: animate 1s linear infinite;
}
' q' v# `! n/ X! k' i1 Z* B# x
@keyframes animate {
- S" ^2 g+ e) W  ^  v4 s  0% {
1 b2 t% a7 L* w/ X3 d+ R    transform: rotate(0deg);
9 ]$ e8 `+ R8 S; y+ ~' B  }
+ X/ i* E* q$ S$ d7 V7 B  100% {
3 p8 j1 C1 e8 t: p" U    transform: rotate(360deg);
  }
}
  ]; z/ ~5 L6 l  s5 H7 n1 s
' j2 K* h9 ~2 e0 t0 {. g% v
小火箭样式实现
.rocket {
  position: absolute;
0 A! E6 o0 H4 d: k3 S  inset: 50px;
  z-index: 10;
4 I6 |4 p7 c  k, N& a  display: flex;
  justify-content: center;
1 Z% k% y' D5 n& ?( @* d) `* a7 e0 O  align-items: center;
5 c4 d7 U: Q% P% B# D* l  /* 设置装载小火箭容器超出部分隐藏 */
! O; r; V- T$ c: Z7 x  overflow: hidden;
! \* n9 b3 K! X  border-radius: 50%;
}
1 W8 s/ }" E4 n' ^
.rocket .fa-rocket {
  position: absolute;
  color: #ff518c;
( X: W' m0 |' i8 F+ n  font-size: 3.5em;
* S7 z. Z9 Q+ {! ^' V# d6 A  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
* V% [% v- X2 x+ b  animation: animateRocket 0.2s linear infinite;
}
" ]5 G$ U0 o- A7 Y+ C! ^
@keyframes animateRocket {
  0%,
/ B5 ^8 g# O* B# j4 L  100% {
! q+ P8 d5 H1 }3 }    transform: translate(0px, 0px) rotate(-45deg);
8 Y' S" _- A7 J+ M! v  }
7 h. e) [9 c# Y  50% {
    transform: translate(0, 3px) rotate(-45deg);
  }
$ e* F) s9 H* I3 Y}
0 F& N2 }8 `& J0 R$ e$ g6 k
" m1 P! D% N8 O完成上述代码后，效果如下图：
. }% k$ [7 x& @云朵样式实现
. Q1 N, S5 K. h+ a4 R.fa-cloud {
7 }/ |# R* m( r( r+ O& u: D  position: absolute;
" }; |7 y. a6 A8 x6 S4 R  top: calc(35px * var(--i));
% I; a3 K3 s/ j: ~& L  left: calc(45px * var(--i));
  font-size: 2em;
  color: #fff;
* Z9 B9 A' R) e7 D! n8 V, }  -webkit-text-stroke: 2px #000;
  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
- h0 T3 Y* b8 j. I) `/ H( |  animation-delay: calc(-0.5s * var(--i));
5 E4 z+ j+ K$ {5 a0 b4 {}

% H( V' z0 u% P# i/ F" m6 O' O/* 云层动画 */
@keyframes animateClounds {
: d! l& L6 y8 C9 ?" @4 a  0% {
: a1 {1 ]% p4 U    transform: translateY(calc(-35 * 5px));
( B; a6 Z6 \5 e) T# n  }
; s0 ]9 U, |5 h! r4 n5 M% B+ A# u  100% {
    transform: translateY(calc(35 * 5px));
  }
}
& b8 z/ [, Z5 B# u
7 t+ a) D) y* g' ?, M3 Y