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

有趣的css - 跷跷板加载动画

news 2026/1/1 17:41:27

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是使用 css 模拟一个跷跷板效果的加载动画效果。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

💎知识点：
1️⃣ transform 变形属性以及 transform-origin 基点定位
2️⃣ :before 和 :after 伪元素选择器
3️⃣ animation 动画属性

🔑思路：
创建一个长矩形和一个正方形，然后让正方形进行翻转移动，同时让整体变化角度，形成如同跷跷板一样的效果。

模拟一个跷跷板效果的加载动画，让用户在等待页面加载时更有趣一些。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="loading73"></div>

主体标签代码。

css 部分代码

.loading73{width: 80px;height: 80px;position: relative;display: flex;justify-content: center;align-items: center;transform-origin:center center;animation: effbox73 3s cubic-bezier(0, 0.6, 1, 0.4) infinite;
}
@keyframes effbox73{0%{transform: rotate(-30deg);}40%{transform: rotate(30deg);}50%{transform: rotate(30deg);}90%{transform: rotate(-30deg);}100%{transform: rotate(-30deg);}
}
.loading73::before{content: '';width: 100%;height: 4px;background-color: #000;position: absolute;left: 0;
}
.loading73::after{content: '';width: 16px;height: 16px;background-color: #089f1f;position: absolute;top: 21px;left: 0;border-radius: 3px;animation: eff73 3s ease-in-out infinite;
}
@keyframes eff73{0%{transform: translateX(0) rotate(0);}10%{transform: translateX(16px) rotate(90deg);}20%{transform: translateX(32px) rotate(180deg);}30%{transform: translateX(48px) rotate(270deg);}40%{transform: translateX(64px) rotate(360deg);}50%{transform: translateX(64px) rotate(360deg);}60%{transform: translateX(48px) rotate(270deg);}70%{transform: translateX(32px) rotate(180deg);}80%{transform: translateX(16px) rotate(90deg);}90%{transform: translateX(0) rotate(0);}100%{transform: translateX(0) rotate(0);}
}

1、给主体标签添加基本样式，定义 flex 布局，让内元素平行垂直居中；添加 transform-origin:center center; 属性，让主体整体基于中心点对齐；

2、利用 :before 基于主体创建一个伪元素长矩形作为跷跷板，宽度为 100% ，高度为 4px ，设置定位属性，靠左对齐，背景色为 #000 黑色，。

3、利用 :after 基于主体创建一个伪元素正方形，设置其基本样式，通过定位靠左对齐，并且让底部与长矩形跷跷板顶部差 1px，这样正方形在旋转时，不会遮盖住长矩形。

4、给伪元素正方形添加 animation 属性，设置参数 animation: eff73 3s ease-in-out infinite; ，并且设置关键帧，让伪元素正方形不停的翻转移动。

5、最后给主体标签添加 animation 属性，设置参数 animation: effbox73 3s cubic-bezier(0, 0.6, 1, 0.4) infinite; ，注意这里设置运动速率为 cubic-bezier(0, 0.6, 1, 0.4) ，让伪元素正方形翻转移动到跷跷板两头时加速跷跷板下降；最后同样要设置关键帧，让跷跷板和正方形的关键帧同步。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>跷跷板加载动画</title></head><body><div class="app"><div class="loading73"></div></div></body>
</html>

css 样式

/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.loading73{width: 80px;height: 80px;position: relative;display: flex;justify-content: center;align-items: center;transform-origin:center center;animation: effbox73 3s cubic-bezier(0, 0.6, 1, 0.4) infinite;
}
@keyframes effbox73{0%{transform: rotate(-30deg);}40%{transform: rotate(30deg);}50%{transform: rotate(30deg);}90%{transform: rotate(-30deg);}100%{transform: rotate(-30deg);}
}
.loading73::before{content: '';width: 100%;height: 4px;background-color: #000;position: absolute;left: 0;
}
.loading73::after{content: '';width: 16px;height: 16px;background-color: #089f1f;position: absolute;top: 21px;left: 0;border-radius: 3px;animation: eff73 3s ease-in-out infinite;
}
@keyframes eff73{0%{transform: translateX(0) rotate(0);}10%{transform: translateX(16px) rotate(90deg);}20%{transform: translateX(32px) rotate(180deg);}30%{transform: translateX(48px) rotate(270deg);}40%{transform: translateX(64px) rotate(360deg);}50%{transform: translateX(64px) rotate(360deg);}60%{transform: translateX(48px) rotate(270deg);}70%{transform: translateX(32px) rotate(180deg);}80%{transform: translateX(16px) rotate(90deg);}90%{transform: translateX(0) rotate(0);}100%{transform: translateX(0) rotate(0);}
}

页面渲染效果

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

[1] 原文阅读

[2] 《有趣的css》，访问网址：funcss.liujueyi.cn，欢迎大家访问。

我是 Just，这里是「设计师工作日常」，求点赞求关注！

有趣的css - 跷跷板加载动画

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是使用 css 模拟一个跷跷板效果的加载动画效果。《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。目录整体效果核心代码html 代码css 部分代码完整代码如下html 页面…...

编程日记 2024/10/22 20:31:07

与机器学习的邂逅--自适应神经网络结构的深度解析

引言随着人工智能的发展，神经网络已成为许多应用领域的重要工具。自适应神经网络（Adaptive Neural Networks，ANN）因其出色的学习能力和灵活性，逐渐成为研究的热点。本文将详细探讨自适应神经网络的基本概念、工作原理…...

编程日记 2024/10/22 20:30:07

用python怎么实现办公自动化【批量生成出货清单】

👨‍💻个人主页：开发者-曼亿点 👨‍💻 hallo 欢迎点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由曼亿点原创 👨‍💻 收录于专栏&#xff1a…...

编程日记 2024/10/22 20:29:05

【Qt】控件——Qt输入类控件、常见的输入类控件、输入类控件的使用、Line Edit、Text Edit、Combo Box、Spin Box

文章目录 Qt5. Qt显示类控件Line EditText EditCombo BoxSpin BoxQDateTimeEditDialSlider Qt 5. Qt显示类控件 Line Edit QLineEdit 用于表示单行输入框。可以输入一段文本，但是不能换行。属性说明text输入框中的文本inputMask输入内容格式约束maxLength最大长度…...

编程日记 2024/10/22 20:28:01

单臂交换知识点

要求：pc1要与pc2 ping通命令： LSW1命令解析： system-view: 这个命令用于进入交换机的全局配置模式。在这个模式下，用户可以配置设备的全局设置。 vlan batch 10 20: 创建VLAN 10和VLAN 20。VLAN（虚拟局域网&#x…...

编程日记 2024/10/22 20:26:58

一、安装必要的基础环境 1.安装依赖包 [rootgitlab-server ~]#yum install curl policycoreutils openssh-server openssh-clients postfix wget git patch -y [rootgitlab-server ~]# systemctl start postfix 2.配置yum源(由于网络问题，国内用户请使用清华大学…...

编程日记 2024/10/22 20:24:54

用python-pptx轻松统一调整演示文档配色方案

哈喽，大家好，我是木头左！安装与准备：python-pptx入门确保你的Python环境中已经安装了python-pptx库。如果没有，可以通过pip进行快速安装： pip install python-pptx此外，对于PPT文档的操作，了解一些基本的PowerPoint概念是有帮助的，比如幻灯片母版（Slide Master）…...

编程日记 2024/10/22 20:20:50

MySQL-30.索引-介绍

一.索引为什么需要索引？当我们没有建立索引时，要在一张数据量极其庞大的表中查询表里的某一个值，会非常的消耗时间。以一个6000000数据量的表为例，查询一条记录的时间耗时约为13s，这是因为要查询符合某个值的数据&am…...

编程日记 2024/10/22 20:19:49

6-2.Android 对话框之基础对话框问题清单（UI 线程问题、外部取消、冲突问题、dismiss 方法与 hide 方法）

对话框对话框（Dialog）是一种常用的 UI 组件，它主要用于显示信息、接收用户操作反馈对话框可以包含各种元素，但是主要还是以文本、按钮为主，其次是列表其中，基础对话框是 Android 中最简单的对话框&…...

编程日记 2024/10/22 20:18:47

git配置以及如何删除git

你努力学习和充实自己，除了提升自身的价值，最实际的是当遇到有喜欢的人和事的时候，除了一片真心，还有拿得出手的东西作用记录开发的历史，每次记录就是一个版本，而且可以回到历史的某个版本可以实现多人合…...

编程日记 2024/10/22 20:15:43

深入理解new Function

基础语法 let func new Function([arg1,arg2,arg3,...argN],functionBody)函数是通过使用参数 arg1…argN 和给定的 functionBody 创建。调用 Function 时可以使用或不使用 new，两者都会创建一个新的 Function 实例举例1: 带有两个参数的函数 let sum new Fun…...

编程日记 2024/10/22 20:13:42

服务器训练神经网络必备工具Screen使用教程

使用服务器训练网络时，不敢关闭终端窗口？用screen~ 服务器训练神经网络必备工具Screen使用教程使用服务器训练网络时，不敢关闭终端窗口？用screen~一、Screen常用命令1. 启动新会话2. 重新连接会话3. 列出所有会话4. 窗口管理5. 断…...

编程日记 2024/10/22 20:09:37

跨越数字鸿沟，FileLink文件摆渡系统——您的数据安全高效传输新选择

在这个信息爆炸的时代，数据的流通与共享已成为推动各行各业发展的关键力量。然而，随着数据量的激增，如何在保证数据安全的前提下，实现高效、便捷的文件传输，成为了众多企业和个人用户面临的重大挑战。正是在这样的背景…...

编程日记 2024/10/22 20:08:35

递归之吃桃问题

题目如下： XXX买了一堆桃子不知道个数，第一天吃了一半的桃子，还不过瘾，又多吃了一个。以后他每天吃剩下的桃子的一半还多一个，到 n 天只剩下一个桃子了。XXX想知道一开始买了多少桃子。首先我们看到题目就应该想边界…...

编程日记 2024/10/22 20:07:34

CZX前端秘籍2

vue生命周期（ 组件从创建到销毁的过程就是它的生命周期） 创建前 beforeCreat（ 在这个阶段属性和方法都不能使用） 创建时 created（ 这里时实例创建完成之后， 在这里完成了数据监测， 可以使用数…...

编程日记 2024/10/22 20:06:33

CAD图纸防泄密用什么加密软软件？2024年10款图纸加密软件排行榜

在当今数字化时代，企业对于CAD图纸的保护越来越重视，因为图纸往往包含着公司的核心技术和商业机密。选择合适的加密软件对于防止数据泄露、维护企业利益至关重要。以下是2024年10款备受推崇的CAD图纸加密软件排行榜，帮助您更好地保护您的设计…...

编程日记 2024/10/22 20:00:25

WebGL编程指南 - WebGL入门

初识绘图流程、缓冲区、着色器、attribute和uniform变量先画一个蓝色的正方形 html代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content&…...

编程日记 2024/10/22 19:59:24

mysql--数据类型

目录搞定所有数据类型一、常见数据类型分类二、数值类型 1、bit类型 2、float类型编辑3、decimal类型 4、字符类型 （1）char （2）varchar （3）varchar和char有甚区别？ &#xff0…...

编程日记 2024/10/22 19:57:22

代码随想录第40天|

#include <bits/stdc.h> using namespace std;vector<list<int>> graph; // 删除局部 graph，使用全局 graph vector<vector<int>> res; vector<int> path; int N, M;void dfs(int index) {if (index N) {res.push_back(path);…...

编程日记 2024/10/22 19:56:21

Turn-it：优化线材重构雕塑制造

🐨文章摘要abstract 电线雕塑在工业应用和日常生活中都很重要。本文提出了一种新的制造策略，通过调整目标形状以适应电线弯曲机，然后由人工将其弯曲回目标形状。（机器弯曲人工弯曲） 该方法通过两阶段弯曲策略实现&a…...

编程日记 2024/10/22 19:55:20

wordpress后台更新后前端没变化的解决方法

使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...

编程新知 2026/1/1 14:42:26

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法最新版…...

编程新知 2026/1/1 16:03:48

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/12/24 9:59:28

通过Wrangler CLI在worker中创建数据库和表

官方使用文档：Getting started Cloudflare D1 docs 创建数据库在命令行中执行完成之后，会在本地和远程创建数据库： npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库： 现在，您的Cloudfla…...

编程新知 2025/12/23 17:54:24

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名转换路径 …...

编程新知 2025/11/30 23:54:19

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式（Python 实现） 在 Python 中，你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是，.doc 是旧的 Word 格式，而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30