CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
效果展示

6 P1 g/ p8 W; e. ], J8 d
$ E5 t3 w( T. j, |  \9 E" JCSS 知识点
7 ~  D3 U) o: |: e. F灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
# A$ |* R+ u6 ~9 ?* r; S4 N动画场景分析
% d: H# j# }' Z$ Q& l. ?' z8 A( q) m从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：

# w' n' X6 `1 M) q" i# ~

# i7 ]+ ?  U& ~3 P% u整体页面布局
: f' n  \* a  ]; i' q' u, f<div class="loader">
  <!-- 小火箭和云朵容器 -->
  g" u% T9 ]- N0 G$ E$ L$ C  <div class="rocket">
6 J, l) V2 ?" t; c    <i class="fa-solid fa-cloud" style="--i:0"></i>
# f7 u/ i8 E( i' ]    <i class="fa-solid fa-cloud" style="--i:1"></i>
    <i class="fa-solid fa-cloud" style="--i:2"></i>
4 J1 q. i# o1 C    <i class="fa-solid fa-cloud" style="--i:3"></i>
    <i class="fa-solid fa-cloud" style="--i:4"></i>
3 W( I) e' N6 X2 \# |  {3 I  g2 \    <i class="fa-solid fa-rocket"></i>
- h% z  [5 l) z& `  </div>
  <!-- 渐变色背景容器 -->
. W) I, ?) S3 u# }- {% x  <span><i></i></span>
  I% `8 D+ S. J/ z; ~</div>
9 O  G9 B3 }: v& {. i
+ x( g9 X) E0 l/ S: Y" \- K+ Z场景容器样式实现
/* 控制渐变色容器大小，也是整个动画的容器 */
.loader span {
  position: relative;
  width: 250px;
  height: 250px;
# g$ z1 _3 h3 }1 M  l5 G  background: #eaeef0;
  k: s; G3 i2 j0 e( l, s  border: 6px solid #eaeef0;
  border-radius: 50%;
! D7 g# O4 H( ^- ~  box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
/ R! q3 M9 K+ T$ h8 `- I}
7 o6 S( }& g# T+ I
! @) x2 q2 Y5 m% ?- z  c9 H+ L/* 外层圆样式 */
.loader span::before {
  content: "";
  }6 t4 h1 T) P( z  position: absolute;
( E% p+ T% S7 A. v+ a  inset: 0;
4 F5 e# X( @; H- T7 W  border-radius: 50%;
  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
}

/* 内层圆样式 */
.loader span::after {
+ D- x; B" o% {  content: "";
3 |( |  u- F3 u; ]8 J1 f( T$ Y  position: absolute;
5 J* d1 }7 x4 }9 B) E  inset: 40px;
3 D& E; R( `  C  F) T0 a  background: #eaeef0;
) p3 S* B& s4 A* }0 w$ {- L  border: 3px solid #eaeef0;
" W; A6 H& ~( O. R8 `  border-radius: 50%;
' \( ?( [1 U" m6 U! M- _/ G6 Z; b  box-shadow: -8px -8px 25px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15),
+ I7 k% r' y; w. ?    inset 3px 3px 10px rgba(0, 0, 0, 0.15), inset -1px -1px 15px rgba(255, 255, 255, 1);
$ d( W1 G4 l9 O7 W  U}

1 S2 G* Y0 Y+ f2 w) X# W/* 背景颜色 */
7 w1 Y3 c& d3 Z& L( {1 s, _.loader span i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
  /* 实现背景旋转动画 */
  animation: animate 1s linear infinite;
}

9 j$ o. z' D. R$ H( x6 v5 N9 l, O@keyframes animate {
+ v: k7 a6 }. V/ c  0% {
0 J3 Q0 [2 d- f: A/ A    transform: rotate(0deg);
# V1 @4 o/ l, _5 Z5 M4 {6 x  }
5 E2 b8 Q3 k1 }1 l: W! K  100% {
    transform: rotate(360deg);
$ j+ T0 }0 i" {* @9 Q  }
( B9 x- L& }+ X; p}

! [& o4 b, x. B% D8 T. Q. v0 f
小火箭样式实现
.rocket {
  position: absolute;
  inset: 50px;
  z-index: 10;
  display: flex;
  justify-content: center;
2 m, ^/ u, J) Q2 V  align-items: center;
3 f6 r- I/ f+ O+ R, R6 R  /* 设置装载小火箭容器超出部分隐藏 */
  overflow: hidden;
( B+ o9 i7 `5 G! P  border-radius: 50%;
3 C- R1 B# B9 ]}

6 \# ^: X. s9 ].rocket .fa-rocket {
) P6 P6 {% B& X- p1 F  position: absolute;
  color: #ff518c;
8 v, F9 e0 b* |( O2 \0 g* ^# `" p0 `  font-size: 3.5em;
) g. X: {# b3 \: B! Y) E  -webkit-text-stroke: 2px #000;
. P9 l# Q2 ^- ~" m  /* 小火箭加速动画 */
5 F, e/ K5 u- @9 b2 D2 r1 A& J  animation: animateRocket 0.2s linear infinite;
}

@keyframes animateRocket {
6 D8 P9 q0 P# U1 x) E  0%,
  100% {
: h: s  k& e5 y5 \+ q    transform: translate(0px, 0px) rotate(-45deg);
7 |; D0 n. y4 U3 H( h2 N  }
! M/ Q- G' P7 R7 \+ V# W  50% {
' o7 ]' D! u' A8 f: J    transform: translate(0, 3px) rotate(-45deg);
, `1 p# u& D7 o7 B3 Z  }
}
- V, q+ b7 ?. H0 I7 ~& V
; v$ X7 z$ n% s! j% @0 m完成上述代码后，效果如下图：
" v8 }' I0 ~+ x云朵样式实现
' w" e6 H5 O( G.fa-cloud {
, }& u4 @3 p9 O% [8 V  position: absolute;
; i6 _) o3 i' A3 P% w# G  top: calc(35px * var(--i));
, X( @( D! K4 t3 x" B  left: calc(45px * var(--i));
  font-size: 2em;
, c$ T* }# h8 u  b8 [& ^( k  color: #fff;
3 |# |3 u- {$ _+ u' \  -webkit-text-stroke: 2px #000;
  g6 \" \5 ]& M# R. i! B  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
  animation-delay: calc(-0.5s * var(--i));
}
4 A8 v' r$ z) S- `' ^8 |% o
/* 云层动画 */
@keyframes animateClounds {
- z: ^1 t( q8 x- I# I$ O  0% {
    transform: translateY(calc(-35 * 5px));
  }
  D5 `3 \& w- U+ @0 d5 p* ]# \  100% {
    transform: translateY(calc(35 * 5px));
  }
; c* S. f3 C. z) }2 u}
# v9 }  Q! ?' N# c7 q; q5 l
* S; b/ I7 m  Q+ |0 h. g6 P
$ s% q& a$ E: U, w6 a/ G1 r0 l; |
2 {" i& s  @9 m2 U5 i0 [! N