CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
9 x+ l. o# v. s9 \效果展示


1 f# I; Q% C: g4 `0 W- \& s- U: DCSS 知识点
灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
动画场景分析
2 \6 ?: G; d: i. K从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：
1 y0 |+ M( S  S9 l


整体页面布局
# a3 m/ a$ M9 V: `+ g; A<div class="loader">
. [1 o/ p% L7 A! U, [( E; `  <!-- 小火箭和云朵容器 -->
  <div class="rocket">
3 H. h! o! U- U" s* N! P" ?, p    <i class="fa-solid fa-cloud" style="--i:0"></i>
    <i class="fa-solid fa-cloud" style="--i:1"></i>
- y' _$ F$ `0 K6 g4 G: V0 e, _; q    <i class="fa-solid fa-cloud" style="--i:2"></i>
1 A8 |$ f0 F/ F0 }- |  T5 Z    <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>
% Y! w  e" n2 H; S1 T  ^2 {& Q0 e* B  </div>
3 _& e# G( R5 m0 B$ c2 S( ~  <!-- 渐变色背景容器 -->
" d5 _, t+ G9 E' \! x  <span><i></i></span>
</div>
7 N: p6 j0 V; {
0 i" y1 ?( v- b( _( d3 x# b场景容器样式实现
/* 控制渐变色容器大小，也是整个动画的容器 */
8 c+ j6 j9 v6 N9 Z4 R3 @8 c" S+ H, l2 }  J.loader span {
# Y! }  K$ a8 g% a, ^5 Y  position: relative;
; A; y0 k4 A7 b! \+ j  I  N  width: 250px;
  height: 250px;
  background: #eaeef0;
/ o7 z* I, y7 c+ f  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;
}
' W8 X! D0 i0 g- ]
/* 外层圆样式 */
9 R: l4 K5 @, P.loader span::before {
' h& a4 r9 A- @4 ^6 P  ^  content: "";
% x5 B' H0 U7 {- A  position: absolute;
; a. i% O5 q: _6 `. x  inset: 0;
, B) n* z; K2 G& d2 h  border-radius: 50%;
" r% F. _) J0 ?) c% X. G  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
" O  I6 f- w) ?5 `, @: [: t: P8 H6 G}

/* 内层圆样式 */
. v1 l5 a/ U% T.loader span::after {
  content: "";
  position: absolute;
8 ?6 `7 n' i2 D3 R/ q/ q" Q1 `  inset: 40px;
  background: #eaeef0;
  border: 3px solid #eaeef0;
  border-radius: 50%;
& J: J' ]+ J- t; x' r; C  box-shadow: -8px -8px 25px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15),
9 }7 ^) _+ {4 S( }! h! w* o    inset 3px 3px 10px rgba(0, 0, 0, 0.15), inset -1px -1px 15px rgba(255, 255, 255, 1);
5 F7 O- V/ \7 ~  p/ S( `}
. c" M1 }+ b! O1 E3 `# e* k
/* 背景颜色 */
+ S8 |5 H# m) ^' H4 @4 a.loader span i {
  position: absolute;
  inset: 0;
$ [5 K  O! ?' x3 f  k! g# _$ a4 P# b  border-radius: 50%;
/ w. k6 N9 k/ ^, n9 u6 y2 P  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
  /* 实现背景旋转动画 */
+ w: }. d. S  o7 u( `% y, K  animation: animate 1s linear infinite;
: X0 S! ^1 O1 g! o$ Z}
- J3 y7 Z4 R/ p2 e
# S: y9 W4 @  z3 U3 j( |@keyframes animate {
8 T8 B5 {7 l# z0 n, I  0% {
! l8 x8 E& c- M4 n    transform: rotate(0deg);
  }
: K" e" _! T+ Y' F4 Y' [* \  100% {
5 x- F8 {% ~& q; q+ z9 N7 f    transform: rotate(360deg);
8 {! _" j0 x2 Y' f6 T  Z7 W  }
}
) d; K- L, N! E6 D
- Z% t9 G, M  P* @( W" j; ^8 J: R
  M1 i9 Y: x+ A6 i# A1 z. i小火箭样式实现
.rocket {
7 z* S5 y( N/ k' {4 [$ T( A/ _$ V  position: absolute;
' L* t  l, y) k6 n3 u- c  inset: 50px;
  z-index: 10;
  display: flex;
  justify-content: center;
: _7 G, {! P. @- p0 F/ A  align-items: center;
& C$ ~5 }& a3 Q( L  /* 设置装载小火箭容器超出部分隐藏 */
  overflow: hidden;
+ u) F1 p; |, I* m5 q9 l( C3 Q% t  border-radius: 50%;
: W4 w; e9 p1 T7 ?( L3 e}
. @9 `) ?0 i0 Y+ X
! B" [) B2 U7 D, v. b5 W4 C0 S* Y6 |.rocket .fa-rocket {
: a6 s, X2 Q7 w; v: @4 `9 |* D  position: absolute;
  color: #ff518c;
3 V3 C8 |7 U) f% w0 }$ A% x  font-size: 3.5em;
  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
, s1 s  _9 y9 _" r1 I" y  animation: animateRocket 0.2s linear infinite;
8 |1 W/ E% p* K5 h}
6 }7 D( i# p" g$ q( f0 }8 r8 M
@keyframes animateRocket {
  0%,
  100% {
, T# `6 B# p- h    transform: translate(0px, 0px) rotate(-45deg);
  }
! O1 h& Z) l& Q/ p# |7 A+ W2 w+ `  50% {
" N) c& u  x- U    transform: translate(0, 3px) rotate(-45deg);
  }
}
: W9 {/ D" @( `8 V
完成上述代码后，效果如下图：
3 O' A" k" M0 ~2 x云朵样式实现
  O; F) Z* ~! K5 B2 W$ v.fa-cloud {
/ G) q3 a( S% H  ~8 p1 U: H$ ?  position: absolute;
0 c# }+ @3 t2 Z1 \7 F) b8 Z  top: calc(35px * var(--i));
  left: calc(45px * var(--i));
. {3 o5 o6 L" Z& E/ P  font-size: 2em;
+ T( B* p2 r  q4 i4 H  color: #fff;
  -webkit-text-stroke: 2px #000;
  animation: animateClounds 1s linear infinite;
) N$ K% I# d- X' N  F  n  /* 动画延迟 */
  animation-delay: calc(-0.5s * var(--i));
7 B6 x. M8 F" Q9 M+ c2 t}

/* 云层动画 */
@keyframes animateClounds {
7 |, m$ ]. X" `+ u% P  0% {
    transform: translateY(calc(-35 * 5px));
% J0 l, l6 B: Y: I* [# l  }
2 t5 o& Y, z  [  100% {
2 f6 ?- J) n$ A" J7 ~! K3 {% J    transform: translateY(calc(35 * 5px));
  }
}
# l" O* |2 H; W8 Y! r# B- H, X- g
5 M* M  e  u! S" z7 N
. P, `5 U8 e& [" l, Y" g  }