CSS实现小火箭加载动画

CSS实现小火箭加载动画

效果展示

CSS 知识点

  • 灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果

动画场景分析

从效果看,我们要实现这个动画效果的话,需要两个容器来支撑布局,一个底部渐变色的背景容器,另外一个是用于装载小火箭和云朵的容器,而装载小火箭和云朵的容器是需要设置超出隐藏元素的属性,这样我们才能让云朵不断执行动画。具体的动画场景分层如下:

整体页面布局

html 复制代码
<div class="loader">
  <!-- 小火箭和云朵容器 -->
  <div class="rocket">
    <i class="fa-solid fa-cloud" style="--i:0"></i>
    <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>
    <i class="fa-solid fa-cloud" style="--i:4"></i>
    <i class="fa-solid fa-rocket"></i>
  </div>
  <!-- 渐变色背景容器 -->
  <span><i></i></span>
</div>

场景容器样式实现

css 复制代码
/* 控制渐变色容器大小,也是整个动画的容器 */
.loader span {
  position: relative;
  width: 250px;
  height: 250px;
  background: #eaeef0;
  border: 6px solid #eaeef0;
  border-radius: 50%;
  box-shadow: -8px -8px 15px rgba(255, 255, 255, 1), 8px 8px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

/* 外层圆样式 */
.loader span::before {
  content: "";
  position: absolute;
  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);
}

/* 内层圆样式 */
.loader span::after {
  content: "";
  position: absolute;
  inset: 40px;
  background: #eaeef0;
  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);
}

/* 背景颜色 */
.loader span i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
  /* 实现背景旋转动画 */
  animation: animate 1s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

小火箭样式实现

css 复制代码
.rocket {
  position: absolute;
  inset: 50px;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 设置装载小火箭容器超出部分隐藏 */
  overflow: hidden;
  border-radius: 50%;
}

.rocket .fa-rocket {
  position: absolute;
  color: #ff518c;
  font-size: 3.5em;
  -webkit-text-stroke: 2px #000;
  /* 小火箭加速动画 */
  animation: animateRocket 0.2s linear infinite;
}

@keyframes animateRocket {
  0%,
  100% {
    transform: translate(0px, 0px) rotate(-45deg);
  }
  50% {
    transform: translate(0, 3px) rotate(-45deg);
  }
}

完成上述代码后,效果如下图:

云朵样式实现

css 复制代码
.fa-cloud {
  position: absolute;
  top: calc(35px * var(--i));
  left: calc(45px * var(--i));
  font-size: 2em;
  color: #fff;
  -webkit-text-stroke: 2px #000;
  animation: animateClounds 1s linear infinite;
  /* 动画延迟 */
  animation-delay: calc(-0.5s * var(--i));
}

/* 云层动画 */
@keyframes animateClounds {
  0% {
    transform: translateY(calc(-35 * 5px));
  }
  100% {
    transform: translateY(calc(35 * 5px));
  }
}

完整代码下载

完整代码下载

相关推荐
无双_Joney8 小时前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥8 小时前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare8 小时前
选择文件夹路径
前端
艾小码8 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月8 小时前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁8 小时前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅8 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸8 小时前
Prompt结构化输出:从入门到精通的系统指南
前端
我是日安8 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js