CSS实现小火箭加载动画

2744557306

CSS实现小火箭加载动画
9 g1 a  E6 T% Z2 ]效果展示
% {8 q- F& O4 |2 i, m8 n
1 t4 @/ ^! }8 R9 t5 B
: ?7 h9 ^/ a+ yCSS 知识点
% i; Q3 z9 G# r/ l; R; _8 F5 W灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
( K$ f4 P' V8 l6 K4 {4 A5 Z动画场景分析
6 t0 t+ \1 n" a& q" ?从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：

9 V; d4 }$ a: A: U$ y3 \
" K  G3 r: j# Z3 N# T
整体页面布局
  e; j! |; [! n# [6 W: H<div class="loader">
1 D; `' ~* [2 R8 B  <!-- 小火箭和云朵容器 -->
  <div class="rocket">
    <i class="fa-solid fa-cloud" style="--i:0"></i>
; B) P3 g/ {- ~" \# [    <i class="fa-solid fa-cloud" style="--i:1"></i>
    <i class="fa-solid fa-cloud" style="--i:2"></i>
    <i class="fa-solid fa-cloud" style="--i:3"></i>
+ p8 k# u( X: f2 ^- S* w! t    <i class="fa-solid fa-cloud" style="--i:4"></i>
! c2 ^# v3 h+ `) r" D# O    <i class="fa-solid fa-rocket"></i>
* p2 I% I' k8 p) ?: w0 I7 e" `: G1 L  </div>
  <!-- 渐变色背景容器 -->
% E3 L# m1 {7 s' I2 D8 @  <span><i></i></span>
</div>

场景容器样式实现
/* 控制渐变色容器大小，也是整个动画的容器 */
* M  G+ }- v$ Y* `0 c' W, {.loader span {
  position: relative;
: u3 x9 ]7 J4 M) q  width: 250px;
  height: 250px;
* h6 @$ ~4 N. b  d- r  u6 C" J  background: #eaeef0;
+ p( u; M$ i8 K; @  border: 6px solid #eaeef0;
) q9 x. J( k1 e4 g  border-radius: 50%;
  box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
1 o) i# W7 R4 Y) r: z8 k% N  overflow: hidden;
}
& F- h5 S7 O( }9 d, Q, C$ a' t9 h
/* 外层圆样式 */
.loader span::before {
  content: "";
, O+ ], Z& w* E1 h2 _  position: absolute;
  n, K# L( t) J  p5 w  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);
/ ^) K$ Z; A6 ^: d}

/* 内层圆样式 */
. [. P$ N! q( T! i8 }4 S2 P.loader span::after {
  content: "";
  position: absolute;
1 L% W# |9 D6 B% n  inset: 40px;
  background: #eaeef0;
( _8 A1 \3 ?1 F2 ^. k9 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),
    inset 3px 3px 10px rgba(0, 0, 0, 0.15), inset -1px -1px 15px rgba(255, 255, 255, 1);
5 h# H2 f. k, i( N7 a# \+ a: d}

) p( @. y. |5 U0 c; ?! B8 ]/* 背景颜色 */
.loader span i {
  position: absolute;
& l+ i' s$ `1 I8 v  inset: 0;
2 T+ r2 h3 e. g7 F/ u, S% A; @' [  border-radius: 50%;
  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
# g5 L) g- B# }1 {  /* 实现背景旋转动画 */
  animation: animate 1s linear infinite;
6 e. F& g3 |0 I( u6 m: e}
4 i" g+ k: n" k
@keyframes animate {
& `5 O5 V( |/ B$ p$ z# n; ^" C  0% {
; c( c9 T" ]+ E+ c7 {    transform: rotate(0deg);
$ `& V8 ]& Q+ b, U2 q8 }9 _2 w& p  }
9 H, M4 k6 J: G5 L1 W3 `( h2 T  100% {
# W+ s" J/ q$ k  z" |+ w    transform: rotate(360deg);
( p* ]% b1 N$ z; y1 k% a7 u+ R& c  }
}
* Z0 e9 Z5 I' L7 p9 d- z* p0 r; B+ W

5 ?3 Z7 Z% @! Q! v$ O小火箭样式实现
, E( G. o) Q& H/ q- K) o# k; L- i.rocket {
. h) `/ U6 u7 q2 l3 J  position: absolute;
6 N" \$ x: d9 W9 h$ {$ Q  inset: 50px;
+ L4 t$ D8 r% W  z-index: 10;
0 Q* a5 |( N9 Q; w% D  display: flex;
: W, X3 x5 W+ j0 ~& U! o- K  justify-content: center;
/ P$ a+ D3 J/ }7 I! O  align-items: center;
7 B: o2 x$ G; g# O$ |  /* 设置装载小火箭容器超出部分隐藏 */
  overflow: hidden;
& y' U7 ~/ f9 B3 d- T6 a  border-radius: 50%;
5 h8 u8 n& e7 |( V# j% h7 W% A}

! x% L* Z. P, [, i  J# W  j.rocket .fa-rocket {
( G) {2 [: Z  |6 X9 H2 O  position: absolute;
) l% B# J8 Z+ ?) j$ y  color: #ff518c;
  font-size: 3.5em;
  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
  animation: animateRocket 0.2s linear infinite;
}
! x" ~+ w& o: X
: z9 P& J+ [5 N* ?1 j/ Y3 v@keyframes animateRocket {
9 Y! R8 B8 q. p+ e# j* m  0%,
  100% {
    transform: translate(0px, 0px) rotate(-45deg);
. n+ \' ]2 G3 D( a" Z/ P  }
  50% {
9 o, v3 l! l" B) q+ M1 {    transform: translate(0, 3px) rotate(-45deg);
" z# t& ?0 }5 e) W( D  }
}

+ B3 d6 o* j, J) |2 y. r完成上述代码后，效果如下图：
云朵样式实现
6 i  S- O$ ^+ }+ J5 b$ B.fa-cloud {
5 v5 r' a0 y1 i% {: R# P* x$ Z5 \  position: absolute;
  top: calc(35px * var(--i));
  left: calc(45px * var(--i));
" b% ?) N8 _! U/ J* V( K. w8 \9 \  font-size: 2em;
  color: #fff;
. e- |0 {1 a3 L: x$ s4 u# N+ L  k  -webkit-text-stroke: 2px #000;
( h# F6 N5 H0 p% k# T  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
  animation-delay: calc(-0.5s * var(--i));
' C; G+ n* F5 ^/ ^; T}

/* 云层动画 */
@keyframes animateClounds {
  0% {
    transform: translateY(calc(-35 * 5px));
5 {' i) L! Q# {) N5 \) D  }
  100% {
3 k, u1 z: G1 R  V* V    transform: translateY(calc(35 * 5px));
  }
' ]! R* k" {  n}
% V. x0 D1 G& J$ q; v
7 R+ n) `: w/ u% y

6 f. ]2 y. _# K