CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
效果展示
  ]# r( S( O- v
" S; p3 T/ C& u! f
CSS 知识点
# m5 k* g, w+ R3 s  P& q灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
动画场景分析
2 ^8 W1 l0 m) ]& T6 D- a% M( A从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：



整体页面布局
# M& B( k# Q5 \( e" a5 c" `  \<div class="loader">
  <!-- 小火箭和云朵容器 -->
  <div class="rocket">
    <i class="fa-solid fa-cloud" style="--i:0"></i>
! K- J3 q$ Q/ T8 X) b    <i class="fa-solid fa-cloud" style="--i:1"></i>
    <i class="fa-solid fa-cloud" style="--i:2"></i>
1 s. E9 W" u. l- J" L) i8 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>
  </div>
  <!-- 渐变色背景容器 -->
& m! G8 Y- [( E8 ]) B& ?6 Z  <span><i></i></span>
</div>
1 }( a2 d$ {" U# q7 h2 s3 |
- B8 M! r7 Q, q3 N5 o% d7 V/ _场景容器样式实现
: p' r; P# u6 W- I& Y; Q/* 控制渐变色容器大小，也是整个动画的容器 */
.loader span {
  position: relative;
, K  ^! o+ K' ?& a. y  width: 250px;
( x* L$ Y% t2 v, ?! B( b- P( B9 y  height: 250px;
. d/ }) F2 H9 ?6 w  background: #eaeef0;
  border: 6px solid #eaeef0;
3 N2 a# K  _" f0 ?6 F  border-radius: 50%;
  r+ q7 T+ Y$ W  box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
6 i0 v) t( I" h( L0 e" S( ]* W  overflow: hidden;
- n% n% a# F8 i6 ?' l, q}

8 W. N* g$ @  G* ?7 c, _! o/* 外层圆样式 */
+ T& l- |- _3 x$ w+ W. q3 X.loader span::before {
  content: "";
  position: absolute;
  inset: 0;
" I9 t2 x$ ~# B1 B' `  border-radius: 50%;
2 z, y+ g% ?6 \& t) j  W* C8 D  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
}

) m* m9 h5 o4 ^0 a5 i/* 内层圆样式 */
. J% h+ f7 T" \. f9 B: X) W.loader span::after {
: C6 W4 O+ a9 Z$ m  content: "";
  position: absolute;
- X9 B$ _2 R$ y  J  inset: 40px;
8 p: H8 f0 Q- a6 E  u. y  C  background: #eaeef0;
5 @, i# N1 e+ e2 [& c6 d( D1 m  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),
& }7 d% q( u9 p( i' e# w& A    inset 3px 3px 10px rgba(0, 0, 0, 0.15), inset -1px -1px 15px rgba(255, 255, 255, 1);
  f# W# }1 Y1 ^. D$ D}

/* 背景颜色 */
.loader span i {
; T! \4 N, F4 g4 k+ B( D) x$ o! ~; p, f5 V  position: absolute;
+ ]7 @/ _" _1 a  inset: 0;
  border-radius: 50%;
" X( t9 j# s3 N; c$ I& |, `  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
1 M$ p: {; E5 i2 |, q+ O' E  /* 实现背景旋转动画 */
  animation: animate 1s linear infinite;
& b5 W" `8 h8 K& G}

& v( k1 x) e7 \) t) r@keyframes animate {
  0% {
4 W9 ~0 T/ Z3 P7 L2 S    transform: rotate(0deg);
  }
4 }& T, U( |8 K  100% {
6 I. C2 U+ Y0 L! b, C    transform: rotate(360deg);
  }
}
0 r, J, K8 |5 T" B8 e" K9 l9 F
4 _' V5 _  z% Z5 e( K
小火箭样式实现
9 h8 b$ X" Y& I! A0 I.rocket {
  position: absolute;
/ s% q: e6 O; t, I. l1 y1 I  inset: 50px;
  z-index: 10;
! {6 O' O7 @; T  display: flex;
. t  r7 s( Z& `' {3 g  justify-content: center;
$ M- j7 i0 c7 d  align-items: center;
  n7 u1 }$ z! S" }  /* 设置装载小火箭容器超出部分隐藏 */
1 O, Q; {: f8 H; ]  overflow: hidden;
  border-radius: 50%;
1 }$ @) N' O/ Z7 ^/ _. m}
2 C5 v0 U1 O9 `$ j( H, W
: r( U# B8 R; @% p; v: S+ t4 a.rocket .fa-rocket {
0 l7 ]2 ?2 o$ K0 J4 d/ B  position: absolute;
  color: #ff518c;
  font-size: 3.5em;
% j7 M) o4 w! k9 g6 |8 s/ {  -webkit-text-stroke: 2px #000;
+ c% d5 t  ]0 b; s/ a$ f  /* 小火箭加速动画 */
  animation: animateRocket 0.2s linear infinite;
) d4 D# j9 t# D- S& F) j; \}

@keyframes animateRocket {
  0%,
  100% {
! P' b; w9 k  r: \6 p    transform: translate(0px, 0px) rotate(-45deg);
  }
  50% {
    transform: translate(0, 3px) rotate(-45deg);
  }
2 P& Z' n9 D+ b/ `& a/ f5 E* }}

8 `3 N- o( r4 N$ b/ b8 [+ ~完成上述代码后，效果如下图：
+ H; Z  k" o/ z4 H# M* H: `8 _+ ^6 E1 V云朵样式实现
$ \$ d4 P0 @/ R, b4 P) n/ F1 q) w( ^.fa-cloud {
) E3 _/ J  v% m* r  position: absolute;
  top: calc(35px * var(--i));
/ C8 \) o8 o; C  left: calc(45px * var(--i));
! p) p3 V0 _* H$ j) Z# y  font-size: 2em;
  color: #fff;
) {7 |; A/ ~' ~; \8 ?" p  -webkit-text-stroke: 2px #000;
  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
4 V, x# a- E9 Y6 _) z# k3 M6 `3 J1 n  animation-delay: calc(-0.5s * var(--i));
/ |- L) t' M" b" l- j8 ]. U$ e}
% K9 e" T3 k# }3 b0 C
( g" Z( m9 Y( _0 Z# p; x/* 云层动画 */
1 q2 U. D) |, C/ D@keyframes animateClounds {
4 A) L8 U; `7 q' H( x  0% {
6 m( H( r, g! x3 ]/ n) N2 Z    transform: translateY(calc(-35 * 5px));
  }
  100% {
* l' L! Q+ g% T0 B; R# {$ A8 z    transform: translateY(calc(35 * 5px));
  }
/ o& y% r5 y! D% M1 R0 L# Q1 J}

" h. o7 e  h7 O/ H  [