CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
效果展示
6 ?4 D2 o& x: Q# p# k! O
9 J; v) S1 a0 [8 [+ g, Y) H
CSS 知识点
) C' M3 {2 `+ q3 w' M灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
动画场景分析
从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：

! |( y  s5 r  A2 \4 L! a: Q# ]  E

6 A! ], K; }' g8 M整体页面布局
) W; u7 h" T3 k$ q; L4 T/ K<div class="loader">
4 Y: u3 ]! M& P7 h  <!-- 小火箭和云朵容器 -->
8 `' c- b' @' @3 f* A3 T% Y  <div class="rocket">
) r2 _, b# F) `0 d    <i class="fa-solid fa-cloud" style="--i:0"></i>
    <i class="fa-solid fa-cloud" style="--i:1"></i>
( d, |, c% ~" f/ U8 K6 K/ ^    <i class="fa-solid fa-cloud" style="--i:2"></i>
4 \( e; ]1 ^; P/ L( E    <i class="fa-solid fa-cloud" style="--i:3"></i>
1 ^( O/ Y! Q, I( E0 G! o' [( J/ R% I    <i class="fa-solid fa-cloud" style="--i:4"></i>
    <i class="fa-solid fa-rocket"></i>
& M( e: v/ \. z) M' k2 W# \  </div>
; Z$ [& k2 J2 `2 _. }7 k% s/ W  <!-- 渐变色背景容器 -->
" T! j6 c, P* J7 {9 G# j  <span><i></i></span>
</div>

场景容器样式实现
/* 控制渐变色容器大小，也是整个动画的容器 */
; @) \! i. h$ B' Y4 v( k.loader span {
  position: relative;
  width: 250px;
  height: 250px;
4 _* D5 {% \3 q0 S6 y  background: #eaeef0;
  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);
5 A( P6 B5 g5 Z3 b1 ?, s0 p' Z4 }  overflow: hidden;
}

/* 外层圆样式 */
.loader span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
3 H* n& Z# E' z& |# E4 B5 x8 f  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
( N8 R3 P* N/ t1 S  E}

+ n6 l6 H0 r8 J9 G, g0 Q: X/* 内层圆样式 */
.loader span::after {
  content: "";
  position: absolute;
  inset: 40px;
) T% s7 g2 w/ E  background: #eaeef0;
  border: 3px solid #eaeef0;
9 Y7 L6 v1 N5 Q. _  border-radius: 50%;
  box-shadow: -8px -8px 25px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15),
5 I& P: F( Z' Y9 J9 K    inset 3px 3px 10px rgba(0, 0, 0, 0.15), inset -1px -1px 15px rgba(255, 255, 255, 1);
. |0 f, P% j3 ?; b2 R}
& J4 r  }& O3 w0 O9 d6 _
/* 背景颜色 */
.loader span i {
) D- ^' h9 O/ w+ K6 I3 Q0 w  position: absolute;
2 [. a# I* a0 a9 Z- h+ K  inset: 0;
+ K! q4 |: e6 J  ~6 v  s& t  border-radius: 50%;
  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
+ x0 i4 f5 Z3 R% r$ @# l6 ~  /* 实现背景旋转动画 */
' o3 }  g$ k. L% D  animation: animate 1s linear infinite;
. V0 j; e' V$ `* m( Z}

7 C0 s! b. P/ S7 |0 j3 t' @@keyframes animate {
  0% {
+ }  K; S" `$ X& b% K6 M1 @; u    transform: rotate(0deg);
  }
4 Z# y( y. J7 ~2 k0 G; @  100% {
    transform: rotate(360deg);
  }
5 M% T4 N! p0 A7 M% q2 m}


小火箭样式实现
.rocket {
" v' r* z8 v+ T7 a; R6 L9 C  position: absolute;
  inset: 50px;
+ p8 q% N0 m9 j  z-index: 10;
  display: flex;
1 D+ B7 }" c/ n# b  justify-content: center;
  align-items: center;
  /* 设置装载小火箭容器超出部分隐藏 */
8 b! O4 i$ T5 \" z/ d  overflow: hidden;
" [6 M7 b' l& y7 h  border-radius: 50%;
}

.rocket .fa-rocket {
  position: absolute;
: h. |8 h9 {. K- X5 c' d8 H  color: #ff518c;
  font-size: 3.5em;
  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
  animation: animateRocket 0.2s linear infinite;
. U/ {/ V) G# b" x& w5 T}
0 L7 i0 h1 T( r1 D$ T" v7 Z5 G
@keyframes animateRocket {
/ A; r" ]$ V" Y0 n* ?9 n  0%,
  100% {
( |  ]& B: `/ |, N5 b$ n    transform: translate(0px, 0px) rotate(-45deg);
  }
. G- y# u& c3 L* P7 T9 ~2 ^  50% {
    transform: translate(0, 3px) rotate(-45deg);
$ g; f3 c6 c- }. O  }
( ]1 O! M$ j+ A0 ~  |1 V( f}

完成上述代码后，效果如下图：
云朵样式实现
: q% H8 u% }9 W! o/ d! n/ ]2 u.fa-cloud {
  position: absolute;
2 _/ o: @) B$ }. V- U4 O3 z  top: calc(35px * var(--i));
  T5 t" @+ q  N( P6 C5 L  left: calc(45px * var(--i));
  font-size: 2em;
$ @+ b% |  q5 \  y' U2 k' p  color: #fff;
  -webkit-text-stroke: 2px #000;
9 o  N& J) M" z: _! q  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
  animation-delay: calc(-0.5s * var(--i));
$ L* K2 G: G2 i$ q}
$ J. _) A$ [0 B' H; {, U' Z
" {2 G6 n! _: z! N/* 云层动画 */
$ ~' q$ j( J. L$ ]3 w@keyframes animateClounds {
  0% {
" o8 K' J5 W5 f3 u+ r* p    transform: translateY(calc(-35 * 5px));
  }
  100% {
* D8 A- r- X: s( A$ n    transform: translateY(calc(35 * 5px));
* f, O' E& O2 i* ^) {' A8 y* ^  }
}
1 E6 A7 L, C1 @& ^$ j
; R" S; g5 s6 s% H* B, E( w6 \
0 q* X) x9 q& ^) q8 m8 C
: E3 w/ r, i2 e) P: h