CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
  ^; l) q- O) y& J  A6 Z) n效果展示


8 V2 \! g4 \1 _/ }: V2 wCSS 知识点
灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
动画场景分析
2 n' b6 Z* K! {# f) d2 w从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：
: U: L- O7 ^# ^' {1 K3 K8 u+ }
# t  T% Z4 B$ B0 s, w4 E. o$ H! J

. T% G% v# c4 R2 A3 B# R% ?整体页面布局
6 i9 `5 `1 D3 N3 n<div class="loader">
  <!-- 小火箭和云朵容器 -->
9 y% i: L+ b3 h  <div class="rocket">
    <i class="fa-solid fa-cloud" style="--i:0"></i>
3 a# h4 c6 t% D    <i class="fa-solid fa-cloud" style="--i:1"></i>
$ X/ C5 a' T# k1 z    <i class="fa-solid fa-cloud" style="--i:2"></i>
    <i class="fa-solid fa-cloud" style="--i:3"></i>
+ l8 s6 @  J) @+ b; X    <i class="fa-solid fa-cloud" style="--i:4"></i>
    <i class="fa-solid fa-rocket"></i>
  </div>
6 E2 h. w$ }6 k1 K, Z; \  <!-- 渐变色背景容器 -->
  <span><i></i></span>
( }/ h" a4 t$ O8 Q! }2 q</div>

, o. Z5 S) H6 O场景容器样式实现
/* 控制渐变色容器大小，也是整个动画的容器 */
3 E* W" P! [0 a5 f6 j.loader span {
  position: relative;
  width: 250px;
6 q8 U3 z) x; e: v0 G# [  height: 250px;
3 ^6 |" G3 ?- l6 c* F  background: #eaeef0;
  border: 6px solid #eaeef0;
4 S0 x: M* A  d% M  border-radius: 50%;
) l) w) X9 g2 r; X# U/ s2 t1 Q$ v  box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
) A  \9 ~/ i4 u, i# Y1 x  overflow: hidden;
}

) W$ Z! [6 M' Q( n$ u/* 外层圆样式 */
1 N  A$ Y- T: `" m2 T.loader span::before {
) c8 M, g: R1 U' J7 A* u  content: "";
/ X9 M4 A' s9 J" E  position: absolute;
" o$ q8 f% Y5 f  inset: 0;
  border-radius: 50%;
: g& V% n& o% ?/ v  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
}
" I. X9 @7 O7 N1 [& G6 F! O
/* 内层圆样式 */
) ^3 g. }- V, ^$ t# M' c.loader span::after {
4 Z! a  E* ?8 j/ k  content: "";
' L5 f9 J: |* J& q6 Z9 {! m! H! S' W  position: absolute;
  inset: 40px;
1 [8 o3 D* T$ n3 j6 y+ ~2 t  background: #eaeef0;
8 N3 z7 z- e) _- }1 H, F& h  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);
}

( b% A0 ~2 G# T& v/ x* w/ k# ^/* 背景颜色 */
.loader span i {
$ |4 d. V/ O- ]  position: absolute;
  s3 }" f# C# D0 B- Z7 W' U( a  inset: 0;
2 {1 j: [+ i! X  border-radius: 50%;
  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
8 _+ \# L$ K+ t  /* 实现背景旋转动画 */
& N5 P" Y9 Y9 ]. K& p3 m3 j- U  animation: animate 1s linear infinite;
}
/ s+ V9 O8 ^: W) e8 f+ A7 Z
@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
4 q0 @( ~+ k! g( T0 }  }
}
- d* d  g7 C8 l4 r+ C

) @* o( b8 ?! x: E. G# X- e小火箭样式实现
.rocket {
9 b! _% K$ O$ Y  ^; a  position: absolute;
% m# K; c* H6 Q& R  inset: 50px;
2 i; X' K3 N' F8 V1 ?  z-index: 10;
/ ?" E) t0 j' m7 |! m  display: flex;
: o( e5 H; c4 W) {$ A  justify-content: center;
  align-items: center;
% W! S; A' {- {5 P8 B% h5 ]: i  /* 设置装载小火箭容器超出部分隐藏 */
  overflow: hidden;
  border-radius: 50%;
2 \! k& F& J$ h( b0 ~5 s, v, g}
6 H8 N" k; h3 r( x) t9 j
; f- t. ]: P, J/ G# @.rocket .fa-rocket {
  position: absolute;
  color: #ff518c;
  font-size: 3.5em;
  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
+ v* k4 K) |" ^$ S* A- G  animation: animateRocket 0.2s linear infinite;
}
- M2 y" p9 L5 f6 L+ L
@keyframes animateRocket {
( S* Y: t6 o6 \( z4 ]( F& P4 a% v1 ]  0%,
6 b9 l1 g, P) K) O2 I% ~) }# @  100% {
* T! ]' W' L; N9 ^) o0 i1 s3 w    transform: translate(0px, 0px) rotate(-45deg);
# M: L  x6 [9 V8 `9 B, P" t  }
- c" q/ }% K8 O/ D  50% {
    transform: translate(0, 3px) rotate(-45deg);
- y! W/ C7 _, m  }
}
, l8 Y7 r; w( f, X% D+ L
3 ]& \) Q' h5 A3 B  J) k0 q$ P完成上述代码后，效果如下图：
云朵样式实现
/ \: V& E! S( k8 e# w9 _.fa-cloud {
9 ~1 Q0 q, C6 Y3 {  position: absolute;
6 T1 W# C0 G5 e( E  top: calc(35px * var(--i));
! X0 r, ?. }) e1 S  left: calc(45px * var(--i));
' ~; D5 f/ d, D  font-size: 2em;
  color: #fff;
  -webkit-text-stroke: 2px #000;
# ]7 @. H, U+ @0 `  animation: animateClounds 1s linear infinite;
# _# O/ b: b' Y! h& A- S$ k  /* 动画延迟 */
* l7 F, l- u2 F3 Z) R. ~8 z8 b( s  animation-delay: calc(-0.5s * var(--i));
}

- k  n3 |, w+ ^2 C3 D% G" y- W1 C5 A/* 云层动画 */
@keyframes animateClounds {
  0% {
    transform: translateY(calc(-35 * 5px));
7 W2 t2 U. ~  l" M  \8 }  }
  100% {
% ^# ~) [- P6 l1 g! w! m0 t    transform: translateY(calc(35 * 5px));
  }
}

% j) O5 E- f+ z

/ x* g* ?  ]5 _2 v' D% L+ u