数学建模社区-数学中国

标题: CSS实现小火箭加载动画 [打印本页]

---

作者: 2744557306    时间: 2024-3-29 17:45
标题: CSS实现小火箭加载动画
CSS实现小火箭加载动画
效果展示


CSS 知识点
灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果
$ K. b1 H( ]6 m4 I动画场景分析
' J6 E' I! e0 K' L9 ^7 P从效果看，我们要实现这个动画效果的话，需要两个容器来支撑布局，一个底部渐变色的背景容器，另外一个是用于装载小火箭和云朵的容器，而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性，这样我们才能让云朵不断执行动画。具体的动画场景分层如下：
) }! M# `- y6 }8 N
  t2 ?/ m! U5 T# v
" c) R8 W" u: z$ s5 g* G
* q; u1 x- I6 ]% o- R. h整体页面布局
0 V* U, c1 D: }; X5 }( B, h<div class="loader">
' z8 W6 b; g- C/ \. Q! e5 o  <!-- 小火箭和云朵容器 -->
  <div class="rocket">
2 U) k7 L0 E, _0 H7 W+ G7 ]6 z    <i class="fa-solid fa-cloud" style="--i:0"></i>
    <i class="fa-solid fa-cloud" style="--i:1"></i>
; o) s) R( T' K! S    <i class="fa-solid fa-cloud" style="--i:2"></i>
    <i class="fa-solid fa-cloud" style="--i:3"></i>
( x6 l$ h% }" K6 h" E  A0 u7 h    <i class="fa-solid fa-cloud" style="--i:4"></i>
8 s7 H- P) ^; m# _    <i class="fa-solid fa-rocket"></i>
; o: d9 u' |3 A2 q& D  D# n  </div>
3 ]* P1 h* ]% x, `2 E9 _' T  <!-- 渐变色背景容器 -->
, f& |$ T6 k+ |  @+ G  <span><i></i></span>
# C2 O# F$ \2 G</div>
) I0 V" O2 d! k4 p
* C  d7 P4 y. v. L场景容器样式实现
$ `3 q# V% g& A9 M& L/* 控制渐变色容器大小，也是整个动画的容器 */
4 D0 L9 B+ d: j( K: ?.loader span {
  position: relative;
  width: 250px;
  height: 250px;
5 {$ k# M2 [+ e* H/ e  background: #eaeef0;
  border: 6px solid #eaeef0;
; V4 G" e+ s! q9 Z* p/ K8 I  border-radius: 50%;
  box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
" S. x6 g# U3 ^  overflow: hidden;
3 w" _9 I4 }( a9 [; |! O; m% w+ `}

* E2 {0 p# X5 s+ e/* 外层圆样式 */
.loader span::before {
0 ?6 {% N3 f# V8 }' n  content: "";
  position: absolute;
: F: g* S; }. D8 w, I5 N) G  inset: 0;
" s; G/ @: u; x) u; c  border-radius: 50%;
% x" Y9 i  E1 b  box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -5px -5px 15px rgba(255, 255, 255, 1);
3 N; ?4 I- H5 x* C9 t}

/* 内层圆样式 */
# Y  \0 @* q) K) e3 a3 E8 n" [.loader span::after {
& d& o7 j5 R( L! B( A  content: "";
  position: absolute;
. X) K3 ~$ x  S, R( O  inset: 40px;
  background: #eaeef0;
2 u; P3 Y% N# a, ^$ H" g6 H# V0 |  border: 3px solid #eaeef0;
  border-radius: 50%;
* h. n% ~; @% G  u5 o  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);
}

/* 背景颜色 */
.loader span i {
$ X) @. j5 p: \5 q  position: absolute;
+ N" N# o! ]+ D6 I8 h9 ?* L  inset: 0;
2 _9 N% B5 Z: f5 S  border-radius: 50%;
' d' z1 V/ r% j1 ]0 K: e5 v# _: \! n  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
. x; B1 I/ ]4 B  /* 实现背景旋转动画 */
  animation: animate 1s linear infinite;
  }; a8 b' Z' I  B}

2 B- N- L4 P2 n. i@keyframes animate {
: a2 Q, [* e: D. u  0% {
' n+ X' j1 @% `  d( [, I+ S# T. {5 Y    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
" a: S# l$ ]& M6 S( P  }
}


小火箭样式实现
.rocket {
3 V  C) B+ ?4 {0 I  position: absolute;
  inset: 50px;
: m5 I+ t8 A; S) ?: d  z-index: 10;
+ c/ E; W9 `6 z  display: flex;
  justify-content: center;
  align-items: center;
  /* 设置装载小火箭容器超出部分隐藏 */
4 s0 g$ F1 ~5 |2 T) H1 [2 M  overflow: hidden;
0 Y$ z! p5 R& H& `2 V  border-radius: 50%;
}

$ s. d5 S  I' B9 L.rocket .fa-rocket {
  position: absolute;
  color: #ff518c;
5 z, b/ T% D9 A  font-size: 3.5em;
  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
$ h3 l2 L& {! S2 ?" I/ M# m  animation: animateRocket 0.2s linear infinite;
3 e/ `2 R0 x* ]+ X: t& L& F}
3 E! \9 R/ J, N+ z! D  i1 }
0 c& [( l, w0 Z; _# U@keyframes animateRocket {
" P; J; F+ l3 k  C- \  0%,
  100% {
$ ?5 Y) q1 s( \+ h7 @- E    transform: translate(0px, 0px) rotate(-45deg);
  }
: `' X/ J! ~+ L/ w  K0 \3 ~  50% {
    transform: translate(0, 3px) rotate(-45deg);
  }
}
- V6 Q0 a: i/ f( K2 U  p
% P  i# S; l" t& X- d完成上述代码后，效果如下图：
& V3 ^$ z, r1 ~2 j% K% a1 c1 e云朵样式实现
.fa-cloud {
' q3 M$ I( {1 }, S: g* f  position: absolute;
; I; E  ^4 ?1 k% }" A, U, W  top: calc(35px * var(--i));
  left: calc(45px * var(--i));
' y: J7 k) Z; }8 e  font-size: 2em;
  color: #fff;
  -webkit-text-stroke: 2px #000;
2 k' F3 a) M5 E& N  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
+ ]$ c2 c! F4 z6 Z" t* N  animation-delay: calc(-0.5s * var(--i));
}
# G3 }! x0 {+ {+ a# K* T% Q, x7 R5 K
/* 云层动画 */
@keyframes animateClounds {
4 v8 _! U: H) d, \' |  0% {
3 j+ C' p0 E; W. w  _  J. c: [8 g    transform: translateY(calc(-35 * 5px));
  }
  100% {
    transform: translateY(calc(35 * 5px));
! e1 b* L, a( y' l# q+ w  }
}
' j& f- P  y& O! n4 F' M

8 i- N. c9 |$ a' l8 [: T/ i

---

欢迎光临 数学建模社区-数学中国 (http://www.madio.net/)

Powered by Discuz! X2.5