CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
效果展示
$ e- e( X) n" W& X8 _- f, H9 {* `
" y; o1 Q/ g( E' S% x5 J
" ]1 |4 d# M* Y6 R0 Y" w  `! M  WCSS 知识点
灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
4 a+ W9 k( i; }1 m, F2 v+ k动画场景分析
: o% ]: E; K7 Z/ E9 ^5 c* C' W  k4 w# x从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：
) f$ v  M2 B( t8 A! x; [$ Z- y' h6 n
! v5 \8 `$ ?" O' }: Z4 W

整体页面布局
<div class="loader">
/ r% i; m- d3 X5 d6 R# Y& m  <!-- 小火箭和云朵容器 -->
  <div class="rocket">
    <i class="fa-solid fa-cloud" style="--i:0"></i>
- \9 [# k! ~3 F# f    <i class="fa-solid fa-cloud" style="--i:1"></i>
8 y/ x6 G5 R4 X- C1 F+ [, T    <i class="fa-solid fa-cloud" style="--i:2"></i>
    <i class="fa-solid fa-cloud" style="--i:3"></i>
2 @) A7 t, j! L4 ?4 p/ i( T    <i class="fa-solid fa-cloud" style="--i:4"></i>
9 l$ V/ |3 T/ Y; R/ }    <i class="fa-solid fa-rocket"></i>
' E. u4 x) q. E3 ]  </div>
7 B* l8 |9 W0 `  z: l) p4 w  <!-- 渐变色背景容器 -->
  <span><i></i></span>
</div>
% m+ @0 T! `2 q2 H/ P# h- l
  B, |% V; R9 r( h+ c6 s1 j场景容器样式实现
/* 控制渐变色容器大小，也是整个动画的容器 */
7 r; A& F6 u; }5 E.loader span {
- @% r, L2 j7 H7 A) x  position: relative;
  width: 250px;
  height: 250px;
  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);
& X) N+ x! B7 {  overflow: hidden;
$ H0 N' i; ^6 w9 N8 i}

/* 外层圆样式 */
" B( i+ X3 v5 T% T" U( B.loader span::before {
( E& o. A4 \0 R0 a* C  content: "";
. G+ W) t, C& o. g# r  position: absolute;
  ^' n6 ^, d0 Z, g, {+ T1 U  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);
6 w. ]) B1 e; q$ o}
+ o7 L# \7 x) f" {, c6 e1 c
/* 内层圆样式 */
.loader span::after {
" p; w; i3 R0 G1 U3 r) U  content: "";
5 ~! m( s& D3 P# j# [9 |" S6 ]  position: absolute;
  inset: 40px;
+ J$ n! L9 n* u8 t  background: #eaeef0;
' }9 u& v" u! v9 g3 E  border: 3px solid #eaeef0;
1 F5 j6 w1 r  i( e; t* L  i  border-radius: 50%;
' F& i; ^( b3 _" c9 {+ x! c  box-shadow: -8px -8px 25px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15),
  y+ G5 S, d# j0 j! i6 T1 o) `' @    inset 3px 3px 10px rgba(0, 0, 0, 0.15), inset -1px -1px 15px rgba(255, 255, 255, 1);
& e; j9 E- x  k$ n! U6 s: V}

+ M! ]7 I1 v2 F; k/* 背景颜色 */
.loader span i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
& p; z5 A; @9 o* r4 I! E, `) R% s  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
: H. k2 W9 l. Y" Z$ P! Y$ S6 D  /* 实现背景旋转动画 */
  animation: animate 1s linear infinite;
7 f. ~" n1 m3 r) a  l4 a2 x* Q0 ]}

@keyframes animate {
: @5 f! Y' |1 u# p/ L, i# I5 R  0% {
    transform: rotate(0deg);
  }
" M8 A  b$ j, W  100% {
" F& t8 O1 ]  U% z4 q  c: a6 S    transform: rotate(360deg);
  }
}
  [" v+ D; l3 `" q$ L, x! w/ |

小火箭样式实现
9 N( W1 j! c4 i( l: m.rocket {
( j" V  m' X4 R, f4 i  position: absolute;
  inset: 50px;
( ^5 D/ M; ~3 b% d( {) w: y0 e  z-index: 10;
  display: flex;
  justify-content: center;
* w$ H9 k" ^* i3 `- `( a: F  align-items: center;
; W6 Z* y9 Z1 {: @  /* 设置装载小火箭容器超出部分隐藏 */
, S8 |& ]% s2 h- E- X# n: J  overflow: hidden;
  border-radius: 50%;
}

: h1 a5 P# B4 s5 p9 z: H.rocket .fa-rocket {
+ _5 X1 t( k# T% H1 v; S+ ]- m  position: absolute;
  color: #ff518c;
* A- E* E8 s/ w- r) n$ q  font-size: 3.5em;
. n8 g( N0 j& M1 E" ]  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
  animation: animateRocket 0.2s linear infinite;
}

6 @5 ?0 x1 V* ?9 z% t! w@keyframes animateRocket {
0 H  d: A9 {/ e  0%,
: `4 o. A4 x% h$ j( Y  100% {
    transform: translate(0px, 0px) rotate(-45deg);
* z: I  _/ u4 K% {8 c  }
  50% {
    transform: translate(0, 3px) rotate(-45deg);
, E. R5 P: ]+ w9 W  }
}
3 u! _. o2 O1 {* V; y3 \* t
完成上述代码后，效果如下图：
0 ?! N% }  L% A8 e云朵样式实现
) V% X" p+ t* Z.fa-cloud {
  position: absolute;
  top: calc(35px * var(--i));
* @. ?+ l  D/ o1 n  left: calc(45px * var(--i));
' o7 n' b! k: u  v0 o  font-size: 2em;
  color: #fff;
  -webkit-text-stroke: 2px #000;
  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
4 [6 e' [! A" Q6 ^- T  animation-delay: calc(-0.5s * var(--i));
}
- W& Y+ r) v2 |  e; m6 Y7 k
/* 云层动画 */
@keyframes animateClounds {
  0% {
    transform: translateY(calc(-35 * 5px));
' @* d; h7 u: L& D1 @$ Q% x* H  }
  100% {
    transform: translateY(calc(35 * 5px));
& A& j6 K! l3 W) G. a  }
}


+ ]5 v0 k# t/ _9 z, m7 q
* j( c, D! e- u3 f5 E