有趣的css - 跷跷板加载动画
大家好,我是 Just,这里是「设计师工作日常」,今天分享的是使用 css 模拟一个跷跷板效果的加载动画效果。
《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。
目录
- 整体效果
- 核心代码
- html 代码
- css 部分代码
- 完整代码如下
- html 页面
- 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 页面…...
与机器学习的邂逅--自适应神经网络结构的深度解析
引言 随着人工智能的发展,神经网络已成为许多应用领域的重要工具。自适应神经网络(Adaptive Neural Networks,ANN)因其出色的学习能力和灵活性,逐渐成为研究的热点。本文将详细探讨自适应神经网络的基本概念、工作原理…...

用python怎么实现办公自动化【批量生成出货清单】
👨💻个人主页:开发者-曼亿点 👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨💻 本文由 曼亿点 原创 👨💻 收录于专栏:…...

【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最大长度…...

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

CentOS7 上安装GitLab的经历
一、安装必要的基础环境 1.安装依赖包 [rootgitlab-server ~]#yum install curl policycoreutils openssh-server openssh-clients postfix wget git patch -y [rootgitlab-server ~]# systemctl start postfix 2.配置yum源(由于网络问题,国内用户请使用清华大学…...
用python-pptx轻松统一调整演示文档配色方案
哈喽,大家好,我是木头左! 安装与准备:python-pptx入门 确保你的Python环境中已经安装了python-pptx库。如果没有,可以通过pip进行快速安装: pip install python-pptx此外,对于PPT文档的操作,了解一些基本的PowerPoint概念是有帮助的,比如幻灯片母版(Slide Master)…...

MySQL-30.索引-介绍
一.索引 为什么需要索引?当我们没有建立索引时,要在一张数据量极其庞大的表中查询表里的某一个值,会非常的消耗时间。以一个6000000数据量的表为例,查询一条记录的时间耗时约为13s,这是因为要查询符合某个值的数据&am…...
6-2.Android 对话框之基础对话框问题清单(UI 线程问题、外部取消、冲突问题、dismiss 方法与 hide 方法)
对话框 对话框(Dialog)是一种常用的 UI 组件,它主要用于显示信息、接收用户操作反馈 对话框可以包含各种元素,但是主要还是以文本、按钮为主,其次是列表 其中,基础对话框是 Android 中最简单的对话框&…...

git配置以及如何删除git
你努力学习和充实自己,除了提升自身的价值,最实际的是当遇到有喜欢的人和事的时候,除了一片真心,还有拿得出手的东西 作用 记录开发的历史,每次记录就是一个版本,而且可以回到历史的某个版本可以实现多人合…...
深入理解new Function
基础语法 let func new Function([arg1,arg2,arg3,...argN],functionBody)函数是通过使用参数 arg1…argN 和给定的 functionBody 创建。 调用 Function 时可以使用或不使用 new,两者都会创建一个新的 Function 实例 举例1: 带有两个参数的函数 let sum new Fun…...
服务器训练神经网络必备工具Screen使用教程
使用服务器训练网络时,不敢关闭终端窗口?用screen~ 服务器训练神经网络必备工具Screen使用教程 使用服务器训练网络时,不敢关闭终端窗口?用screen~一、Screen常用命令1. 启动新会话2. 重新连接会话3. 列出所有会话4. 窗口管理5. 断…...

跨越数字鸿沟,FileLink文件摆渡系统——您的数据安全高效传输新选择
在这个信息爆炸的时代,数据的流通与共享已成为推动各行各业发展的关键力量。然而,随着数据量的激增,如何在保证数据安全的前提下,实现高效、便捷的文件传输,成为了众多企业和个人用户面临的重大挑战。正是在这样的背景…...
递归之吃桃问题
题目如下: XXX买了一堆桃子不知道个数,第一天吃了一半的桃子,还不过瘾,又多吃了一个。以后他每天吃剩下的桃子的一半还多一个,到 n 天只剩下一个桃子了。XXX想知道一开始买了多少桃子。 首先我们看到题目就应该想边界…...

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

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

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

mysql--数据类型
目录 搞定所有数据类型 一、常见数据类型分类 二、数值类型 1、bit类型 2、float类型 编辑3、decimal类型 4、字符类型 (1)char (2)varchar (3)varchar和char有甚区别? ࿰…...
代码随想录第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);…...

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

React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...

CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...

微信小程序云开发平台MySQL的连接方式
注:微信小程序云开发平台指的是腾讯云开发 先给结论:微信小程序云开发平台的MySQL,无法通过获取数据库连接信息的方式进行连接,连接只能通过云开发的SDK连接,具体要参考官方文档: 为什么? 因为…...

C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋
随着工业以太网的发展,其高效、便捷、协议开放、易于冗余等诸多优点,被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口,具有实时性、开放性,使用TCP/IP和IT标准,符合基于工业以太网的…...
【WebSocket】SpringBoot项目中使用WebSocket
1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖,添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

倒装芯片凸点成型工艺
UBM(Under Bump Metallization)与Bump(焊球)形成工艺流程。我们可以将整张流程图分为三大阶段来理解: 🔧 一、UBM(Under Bump Metallization)工艺流程(黄色区域ÿ…...