当前位置: 首页 > news >正文

流畅!HTMLCSS打造网格方块加载动画

效果演示

这个动画的效果是五个方块在网格中上下移动,模拟了一个连续的加载过程。每个方块的动画都是独立的,但是它们的时间间隔和路径被设计为相互协调,以创建出流畅的动画效果。

HTML

<div class="loadingspinner"><div id="square1"></div><div id="square2"></div><div id="square3"></div><div id="square4"></div><div id="square5"></div>
</div>
  • loadingspinner:包含所有方块的容器。
  • square1 到 square5:这五个div元素代表动画中的五个方块,每个方块都将通过CSS进行样式化和动画化。

CSS

.loadingspinner {--square: 26px;--offset: 30px;--duration: 2.4s;--delay: 0.2s;--timing-function: ease-in-out;--in-duration: 0.4s;--in-delay: 0.1s;--in-timing-function: ease-out;width: calc(3 * var(--offset) + var(--square));height: calc(2 * var(--offset) + var(--square));padding: 0px;margin-left: auto;margin-right: auto;margin-top: 10px;margin-bottom: 30px;position: relative;
}.loadingspinner div {display: inline-block;background: darkorange;/*background: var(--text-color);*//*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/border: none;border-radius: 2px;width: var(--square);height: var(--square);position: absolute;padding: 0px;margin: 0px;font-size: 6pt;color: black;
}.loadingspinner #square1 {left: calc(0 * var(--offset));top: calc(0 * var(--offset));animation: square1 var(--duration) var(--delay) var(--timing-function) infinite,squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}.loadingspinner #square2 {left: calc(0 * var(--offset));top: calc(1 * var(--offset));animation: square2 var(--duration) var(--delay) var(--timing-function) infinite,squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both;
}.loadingspinner #square3 {left: calc(1 * var(--offset));top: calc(1 * var(--offset));animation: square3 var(--duration) var(--delay) var(--timing-function) infinite,squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both;
}.loadingspinner #square4 {left: calc(2 * var(--offset));top: calc(1 * var(--offset));animation: square4 var(--duration) var(--delay) var(--timing-function) infinite,squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both;
}.loadingspinner #square5 {left: calc(3 * var(--offset));top: calc(1 * var(--offset));animation: square5 var(--duration) var(--delay) var(--timing-function) infinite,squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both;
}@keyframes square1 {0% {left: calc(0 * var(--offset));top: calc(0 * var(--offset));}8.333% {left: calc(0 * var(--offset));top: calc(1 * var(--offset));}100% {left: calc(0 * var(--offset));top: calc(1 * var(--offset));}
}@keyframes square2 {0% {left: calc(0 * var(--offset));top: calc(1 * var(--offset));}8.333% {left: calc(0 * var(--offset));top: calc(2 * var(--offset));}16.67% {left: calc(1 * var(--offset));top: calc(2 * var(--offset));}25.00% {left: calc(1 * var(--offset));top: calc(1 * var(--offset));}83.33% {left: calc(1 * var(--offset));top: calc(1 * var(--offset));}91.67% {left: calc(1 * var(--offset));top: calc(0 * var(--offset));}100% {left: calc(0 * var(--offset));top: calc(0 * var(--offset));}
}@keyframes square3 {0%,100% {left: calc(1 * var(--offset));top: calc(1 * var(--offset));}16.67% {left: calc(1 * var(--offset));top: calc(1 * var(--offset));}25.00% {left: calc(1 * var(--offset));top: calc(0 * var(--offset));}33.33% {left: calc(2 * var(--offset));top: calc(0 * var(--offset));}41.67% {left: calc(2 * var(--offset));top: calc(1 * var(--offset));}66.67% {left: calc(2 * var(--offset));top: calc(1 * var(--offset));}75.00% {left: calc(2 * var(--offset));top: calc(2 * var(--offset));}83.33% {left: calc(1 * var(--offset));top: calc(2 * var(--offset));}91.67% {left: calc(1 * var(--offset));top: calc(1 * var(--offset));}
}@keyframes square4 {0% {left: calc(2 * var(--offset));top: calc(1 * var(--offset));}33.33% {left: calc(2 * var(--offset));top: calc(1 * var(--offset));}41.67% {left: calc(2 * var(--offset));top: calc(2 * var(--offset));}50.00% {left: calc(3 * var(--offset));top: calc(2 * var(--offset));}58.33% {left: calc(3 * var(--offset));top: calc(1 * var(--offset));}100% {left: calc(3 * var(--offset));top: calc(1 * var(--offset));}
}@keyframes square5 {0% {left: calc(3 * var(--offset));top: calc(1 * var(--offset));}50.00% {left: calc(3 * var(--offset));top: calc(1 * var(--offset));}58.33% {left: calc(3 * var(--offset));top: calc(0 * var(--offset));}66.67% {left: calc(2 * var(--offset));top: calc(0 * var(--offset));}75.00% {left: calc(2 * var(--offset));top: calc(1 * var(--offset));}100% {left: calc(2 * var(--offset));top: calc(1 * var(--offset));}
}@keyframes squarefadein {0% {transform: scale(0.75);opacity: 0.0;}100% {transform: scale(1.0);opacity: 1.0;}
}
  • .loadingspinner:定义了容器的尺寸和位置。使用了CSS变量来控制方块的大小、间距、动画持续时间等。
  • .loadingspinner div:为所有方块设置了基本的样式,包括背景颜色、尺寸和位置。
  • #square1 到 #square5:为每个方块定义了特定的动画和初始位置。
  • @keyframes square1 到 @keyframes square5:定义了每个方块的动画路径,包括它们在容器内的水平和垂直移动。
  • @keyframes squarefadein:定义了一个淡入效果,使得方块在动画开始时逐渐放大并变得不透明。
http://www.lryc.cn/news/473658.html

相关文章:

  • linux命令之top(Linux Command Top)
  • 数据结构-希尔排序(ShellSort)笔记
  • Junit + Mockito保姆级集成测试实践
  • 软件项目管理要点
  • ESP8266 连接 MQTT 服务器EMQX 连接MQTTX
  • Python中如何处理异常情况?
  • openpnp - 在openpnp中单独测试相机
  • Spark窗口函数
  • Idea、VS Code 如何安装Fitten Code插件使用
  • elasticsearch7.x在k8s中的部署
  • 校园社团信息管理平台:Spring Boot技术实战指南
  • 【Linux】从内核角度理解 TCP 的 全连接队列(以及什么是 TCP 抓包)
  • 太速科技-712-6U VPX飞腾处理器刀片计算机
  • 深度学习(八) TensorFlow、PyTorch、Keras框架大比拼(8/10)
  • thinkphp中命令行工具think使用,可用于快速生成控制器,模型,中间件等
  • Discourse 是否支持手机注册
  • 软件测试学习笔记丨Flask框架-请求与响应
  • 【C++笔记】list结构剖析及其模拟实现
  • C#进阶1
  • PHP如何对输出进行转义
  • Windows 10 安装Docker踩过的坑和解决-31/10/2024
  • 【应急响应】Linux植入恶意程序排查流程
  • 微信小程序app.js里面onLaunch里面的函数比page里面的onshow里面的方法后执行
  • 斐波那契时间序列,精准捕捉市场拐点 MT4免费公式源码!
  • 计算机的错误计算(一百四十)
  • JavaEE初阶---网络原理(四)--IP协议/DNS协议
  • LeetCode20:有效的括号
  • 简单介绍Class文件、Dex文件以及ELF文件
  • Vivo开奖了,劝退价。。
  • 鸿蒙打包hvigorw clean报错No npmrc file is matched in the current user folder解决