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

有趣的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 - 跷跷板加载动画

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

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

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

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

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

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

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

单臂交换知识点

要求&#xff1a;pc1要与pc2 ping通 命令&#xff1a; LSW1命令解析&#xff1a; system-view: 这个命令用于进入交换机的全局配置模式。在这个模式下&#xff0c;用户可以配置设备的全局设置。 vlan batch 10 20: 创建VLAN 10和VLAN 20。VLAN&#xff08;虚拟局域网&#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源(由于网络问题&#xff0c;国内用户请使用清华大学…...

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

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

MySQL-30.索引-介绍

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

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

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

git配置以及如何删除git

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

深入理解new Function

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

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

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

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

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

递归之吃桃问题

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

CZX前端秘籍2

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

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

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

WebGL编程指南 - WebGL入门

初识绘图流程、缓冲区、着色器、attribute和uniform变量 先画一个蓝色的正方形 html代码&#xff1a; <!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、字符类型 &#xff08;1&#xff09;char &#xff08;2&#xff09;varchar &#xff08;3&#xff09;varchar和char有甚区别&#xff1f; &#xff0…...

代码随想录第40天|

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

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

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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...