流畅!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:定义了一个淡入效果,使得方块在动画开始时逐渐放大并变得不透明。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/908441.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【skywalking 】More than 15,000 ‘grammar‘ tokens have been presented. 【未解决请求答案】

问题 skywalking相关版本信息 jdk&#xff1a;17skywalking&#xff1a;10.1.0apache-skywalking-java-agent&#xff1a;9.3.0ElasticSearch : 8.8.2 问题描述 More than 15,000 grammar tokens have been presented. To prevent Denial Of Service attacks, parsing has b…

docker desktop使用ubuntu18.04带图形化+运行qemu

记录一下docker desktop使用ubuntu18.04带图形化命令和使用步骤 1. 下载镜像 参考&#xff1a;【Docker教程】Docker部署Ubuntu18.04(带图形化界面) 命令&#xff1a; docker pull kasmweb/ubuntu-bionic-desktop:1.10.02. 启动镜像 命令&#xff1a; docker run -d -it …

jmeter压测工具环境搭建(Linux、Mac)

目录 java环境安装 1、anaconda安装java环境&#xff08;推荐&#xff09; 2、直接在本地环境安装java环境 yum方式安装jdk 二进制方式安装jdk jmeter环境安装 1、jmeter单机安装 启动jmeter 配置环境变量 jmeter配置中文 2、jmeter集群搭建 多台机器部署jmeter集群…

ai翻唱部分步骤

模型部署 我是用的RVC进行的训练&#xff0c;也可以使用so-vits-svc。 通过百度网盘分享的文件&#xff1a;RVC-beta 链接&#xff1a;https://pan.baidu.com/s/1c99jR2fLChoqUFqf9gLUzg 提取码&#xff1a;4090 以Nvida显卡为例&#xff0c;分别下载“RVC1006Nvidia”和…

算法笔记-Day09(字符篇)

151. 反转字符串中的单词 class Solution {public String reverseWords(String s) {int lens.length(),count0;StringBuffer tempnew StringBuffer();StringBuffer ansnew StringBuffer();for(int i0;i<len;i){if(s.charAt(i)! &&(i0 || s.charAt(i-1) )){while(i&l…

安科瑞电能质量治理产品在光伏电站的应用有效解决了光伏电站面临的功率因数过低和谐波问题-安科瑞黄安南

1. 概述 随着全球对可再生能源需求的增加&#xff0c;分布式光伏电站的建设和发展迅速。然而&#xff0c;分布式光伏电站的运行过程中面临着一系列问题&#xff0c;比如导致企业关口计量点功率因数过低、谐波污染等。这些问题不仅影响光伏电站自身的运行效率&#xff0c;还会对…

Leetcode137只出现一次的数字|| 及其拓展

简述&#xff1a; 虽然标题是这么描述的&#xff0c;但是我们不是一上来就解这道题&#xff0c;先看一下他的子题和扩展 子题&#xff1a;136. 只出现一次的数字 - 力扣&#xff08;LeetCode&#xff09; 扩展题&#xff1a; 所以我们由易到难&#xff0c;先来看第一道&#x…

leetcode 382.链表随机结点

1.题目要求: 2.题目代码: /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode *next) : val(x)…

GaussDB Ustore存储引擎解读

目录 一、数据库存储引擎 二、GaussDB Ustore存储引擎 总结 本文将介绍GaussDB中的Ustore存储引擎&#xff0c;包括Ustore的设计背景、特点介绍和适用业务场景等。 一、数据库存储引擎 数据库的存储引擎负责在内存和磁盘上存储、检索和管理数据&#xff0c;确保每个节点的…

使用 Sortable.js 库 实现 Vue3 elementPlus 的 el-table 拖拽排序

文章目录 实现效果Sortable.js介绍下载依赖添加类名导入sortablejs初始化拖拽实例拖拽完成后的处理总结 在开发过程中&#xff0c;我们经常需要处理表格数据&#xff0c;并为用户提供便捷的排序方式。特别是在需要管理长列表、分类数据或动态内容时&#xff0c;拖拽排序功能显得…

机器学习是什么?AIGC又是什么?机器学习与AIGC未来科技的双引擎

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

.net core 接口,动态接收各类型请求的参数

[HttpPost] public async Task<IActionResult> testpost([FromForm] object info) { //Postman工具测试结果&#xff1a; //FromBody,Postman的body只有rawjson时才进的来 //参数为空时&#xff0c;Body(form-data、x-www-form-urlencoded)解析到的数据也有所…

探索Unity:从游戏引擎到元宇宙体验,聚焦内容创作

unity是实时3D互动内容创作和运营平台&#xff0c;包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者&#xff0c;借助Unity将创意变成现实。提供一整套完善的软件解决方案&#xff0c;可用于创作、运营和变现任何实时互动的2D和3D内容&#xff0c;支持平台包括手机、…

构造有向(无向)加权图

邻接表的一般构造 #include<bits/stdc.h> #define N 1e4 using namespace std; typedef struct BP{ int P;//边所指的顶点位置 struct BP *nextB;//指向下一条边的指针 int Q;//储存边的信息 }BP; typedef struct DP{ int date;//顶点信息 BP *FirstB;//指向第一条连接…

RabbitMQ交换机类型

RabbitMQ交换机类型 1、RabbitMQ工作模型2、RabbitMQ交换机类型2.1、Fanout Exchange&#xff08;扇形&#xff09;2.1.1、介绍2.1.2、示例2.1.2.1、生产者2.1.2.2、消费者2.1.2.3、测试 2.2、Direct Exchange&#xff08;直连&#xff09;2.2.1、介绍2.2.2、示例2.2.2.1、生产…

字符串算法

字符串 1.kmp匹配算法Anya and 1100 1.kmp匹配算法 模板题链接 不懂可以看这个~详细的思路 #include <string> #include <iostream>using namespace std; const int N 1000010;string s,p;// s[]是长文本&#xff0c;p[]是模式串&#xff0c;n是s的长度&#xff…

WSL开发--利用Git连接远程仓库(详细步骤)

这篇文章主要介绍了如何将本地项目推送到 GitLab 上&#xff0c;并且避免每次提交都需要输入用户名和密码。文中分步讲解了配置 GitLab SSH 密钥以及配置 Git 远程仓库地址的方法。以下是文章的优化和简洁版&#xff1a; 将本地项目推送到 GitLab 并配置 SSH 免密登录 为了方便…

操作系统(10) (并发(2)------基于软件/硬件/操作系统层面解决两个进程之间的临界区问题/抢占式/非抢占式内核)

目录 1. 基于软件层面(Petersons Solution) Petersons Solution 满足三个要求: 好处: 缺点 2. 基于硬件层面 1. Disabling Interrupts (禁用中断) 概念解释&#xff1a; 代码框架&#xff1a; 要求&#xff1a; 禁用中断的好处与问题&#xff1a; 2. Test and Set Lock (…

基于 JAVASSM 框架沙县小吃点餐系统

基于 JAVASSM 框架&#xff08;即 Java Spring Spring MVC MyBatis&#xff09;开发一个沙县小吃点餐系统。 步骤一&#xff1a;需求分析 明确系统需要实现的功能&#xff0c;比如&#xff1a; 用户注册和登录浏览菜单添加菜品到购物车下单并支付订单管理后台管理&#…

零基础Java第十三期:继承与多态(一)

目录 一、继承 1.1. 继承的目的 1.2. 继承的概念 1.3. 继承的语法 1.4. 父类的访问 1.5. 继承中的重载与重写 1.6. 子类的构造方法 1.7. 再谈初始化 一、继承 1.1. 继承的目的 我们来定义一个Dog和Cat的类&#xff1a; public class Dog {public int age;public Strin…