有趣的css - 列表块加载动效

大家好,我是 Just,这里是「设计师工作日常」,今天分享的是用 css 打造一个极简的列表块加载动效。

最新文章通过公众号「设计师工作日常」发布。


目录

  • 整体效果
  • 核心代码
    • html 代码
    • css 部分代码
  • 完整代码如下
    • html 页面
    • css 样式
    • 页面渲染效果

整体效果

💎知识点:
1️⃣ animation 动画
2️⃣ flex 布局
3️⃣ opacity 透明属性

🔑思路:
写好列表块整体布局,然后利用不同的动画时长调整变化透明度,来实现视觉上的列表正在加载的效果。

适用于 app 列表加载延迟等页面场景。


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

核心代码

html 代码

<div class="list-box70"><div class="pic70"></div><div class="list70"><span class="span70"></span><div class="span-div70"><span class="span701"></span><span class="span702"></span></div></div>
</div>

html 搭建列表块整体布局。

css 部分代码

.list-box70{width: 200px;height: 76px;position: relative;background-color: #f8f8f8;border-radius: 12px;padding: 16px;display: flex;box-sizing: border-box;
}
.pic70{width: 44px;height: 44px;position: relative;background-color: #e4e4e4;border-radius: 4px;animation: eff70 1.8s linear infinite;
}
.list70{position: relative;display: flex;flex-direction: column;margin-left: 10px;
}
.span70{width: 114px;height: 20px;position: relative;border-radius: 4px;background-color: #e4e4e4;animation: eff70 2s linear infinite;
}
.span-div70{position: relative;margin-top: 10px;display: flex;
}
.span701,.span702{width: 65px;height: 14px;position: relative;border-radius: 4px;background-color: #e4e4e4;animation: eff70 2.2s linear infinite;
}
.span702{width: 39px;margin-left: 10px;animation: eff70 2.4s linear infinite;
}
@keyframes eff70{0%{opacity: 0.2;}50%{opacity: 1;}100%{opacity: 0.2;}
}

1、定义整体列表块通用样式,设置一个浅一点的背景色,设置 display: flex 布局。

2、利用 flex 布局,分别写出列表块中的每个小的矩形,并且设置相关的样式颜色等。

3、给列表块里的每个小的矩形设置 animation 动画,并且设置相关参数,每个动画时长递增 0.2s

4、设置动画关键帧,定义变化 opacity 透明属性,让列表块中的小的矩形由浅到深循环变化,这样就形成了视觉上列表块内容在加载的效果。

完整代码如下

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="list-box70"><div class="pic70"></div><div class="list70"><span class="span70"></span><div class="span-div70"><span class="span701"></span><span class="span702"></span></div></div></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;
}
.list-box70{width: 200px;height: 76px;position: relative;background-color: #f8f8f8;border-radius: 12px;padding: 16px;display: flex;box-sizing: border-box;
}
.pic70{width: 44px;height: 44px;position: relative;background-color: #e4e4e4;border-radius: 4px;animation: eff70 1.8s linear infinite;
}
.list70{position: relative;display: flex;flex-direction: column;margin-left: 10px;
}
.span70{width: 114px;height: 20px;position: relative;border-radius: 4px;background-color: #e4e4e4;animation: eff70 2s linear infinite;
}
.span-div70{position: relative;margin-top: 10px;display: flex;
}
.span701,.span702{width: 65px;height: 14px;position: relative;border-radius: 4px;background-color: #e4e4e4;animation: eff70 2.2s linear infinite;
}
.span702{width: 39px;margin-left: 10px;animation: eff70 2.4s linear infinite;
}
@keyframes eff70{0%{opacity: 0.2;}50%{opacity: 1;}100%{opacity: 0.2;}
}

页面渲染效果

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


[1] 原文阅读

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


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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Ollama和Open WebUI管理本地开源大模型的完整指南

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;AI大模型部署与应用专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年5月27日12点20分 &#x1f004;️文章质量&#xff1a;96分 目录 ✨️Open-WebUI介绍 优点 &#x1f4a5;部署教程…

计算机视觉与深度学习实战:以Python为工具,基于Hough变化的答题卡识别

一、引言 在信息技术飞速发展的今天,计算机视觉与深度学习已成为许多领域不可或缺的技术。特别是在教育领域,答题卡识别技术的应用极大地提高了阅卷效率和准确性。本文将详细介绍如何利用Python作为工具,结合计算机视觉和深度学习的技术,基于Hough变换实现答题卡识别的实战…

Linux命令 jps(Java Process Status)解释

文章目录 1、第一种解释2、第二种解释3、第三种解释 1、第一种解释 jps 命令本身并不是一个标准的 Unix/Linux 命令&#xff0c;但您可能是想提到 jps 的一个变种或误写了 jps 为 jps&#xff0c;而实际上可能是想提及 jps&#xff08;Java Virtual Machine Process Status To…

Power Bi 自定义进度条,圆角框,矩阵图标的实现

最近项目在做Power BI&#xff0c;我总结了几个常用的自定义样式&#xff0c;分享一下做法。 比如我们要实现如图这样的一个样式&#xff1a; 这包含了一个带文字的自定义进度条&#xff0c;矩阵有树型展开以及图标显示&#xff0c;最外面有圆角框包围。我觉得这几个样式出现…

海云安两大金融案例入编行业典范,七大安全领域实力登榜《2024中国金融网络安全全景图》

近日&#xff0c;数说安全与《中国信息安全》杂志联合编写并发布了《2024年中国金融行业网络安全研究报告》&#xff08;以下简称报告&#xff09;、《2024年中国金融行业网络安全案例集》&#xff08;以下简称案例集&#xff09;、《2024年中国金融行业网络安全市场全景图》&a…

VSCode 报错 之 运行 js 文件报错 ReferenceError: document is not defined

1. 背景 持续学习ing 2. 遇到的问题 在VSCode 右键 code runner js 文件报错 ReferenceError: document is not defined eg&#xff1a; // 为每个按钮添加点击事件监听器 document.querySelectorAll(button).forEach(function (button) {button.addEventListener(click, f…

kafka-守护启动

文章目录 1、kafka守护启动1.1、先启动zookeeper1.1.1、查看 zookeeper-server-start.sh 的地址1.1.2、查看 zookeeper.properties 的地址 1.2、查看 jps -l1.3、再启动kafka1.3.1、查看 kafka-server-start.sh 地址1.3.2、查看 server.properties 地址 1.4、再次查看 jps -l 1…

深入探索C++继承机制:从概念到实践的全面指南

目录 继承的概念及定义 继承的概念 继承的定义 定义格式 继承方式和访问限定符 继承基类成员访问方式的变化 默认继承方式 基类和派生类对象赋值转换 继承中的作用域 派生类的默认成员函数 继承与友元 继承与静态成员 继承的方式 菱形虚拟继承 菱形虚拟继承原理 继承…

【嵌入式】RS485通信+硬件

目录 1.物理层 2.协议层 3.收发电路 3.1三极管开关电路 3.2收发原理图解释 1.物理层 对比 CAN 通讯网络&#xff0c;可发现它们的网络结构组成是类似的&#xff0c;每个节点都是由一个通讯控制器和 一个收发器组成&#xff0c;在 RS-485 通讯网络中&#xff0c;节点中的…

Linux 创建 查看 删除 用户和用户组等操作

在Linux系统中,创建、查看和删除用户和用户组等操作通常通过命令行工具完成。以下是一些常用的命令: 用户操作: 创建用户:sudo adduser username修改用户密码:sudo passwd username删除用户:sudo deluser username用户组操作: 创建用户组:sudo addgroup groupname删除…

Java基础:异常(三)

Java基础&#xff1a;异常&#xff08;三&#xff09; 文章目录 Java基础&#xff1a;异常&#xff08;三&#xff09;1. Java异常体系1.1 错误的分类1.2 异常的分类 2. 异常的捕获与处理2.1 try-catch2.2 finally 3. 异常的抛出4. 自定义异常 1. Java异常体系 Java的异常体系是…

ubuntu20 安装Anaconda

Anaconda官网&#xff1a;Anaconda | The Operating System for AI 然后就开始下载了。下载完 直接打开终端运行 bash Anaconda3-2024.02-1-Linux-x86_64.sh 按回车ENTER 一直空格&#xff0c;直到 yes&#xff0c;回车 确认安装路径&#xff0c;默认即可&#xff0c;直接回车…

SQL Server定期收缩日志文件详细步骤——基于SQL Server 2012

SQL Server定期收缩日志文件详细步骤 一、环境配置1、查看数据库的属性2、文件设置3、备份模式4、查看收缩配置5、查看收缩选项 二、编写作业计划1、选择新建作业2、常规配置3、步骤4、输入内容5、脚本详解6、新建计划7、输入名称、选择执行时间8、查看测试9、查看测试结果 一、…

【最优化方法】实验四 约束最优化方法的MATLAB实现

实验的目的和要求&#xff1a;通过本次实验使学生较为熟练使用MATLAB软件&#xff0c;并能利用该软件进行约束最优化方法的计算。 实验内容&#xff1a; &#xff11;、罚函数法的MATLAB实现 &#xff12;、可行方向法的MATLAB实现 学习建议&#xff1a; 本次实验就是要通…

递归/递归函数

不明白为什么很多学校要从“汉诺塔”讲起&#xff0c;这玩意是真的绕。 递归&#xff08;函数&#xff09;的概念&#xff1a; 调用自身来求解问题 不要过多考虑递归细节&#xff0c;宏观层面上的理解递归就行 ps:总不能一直调用下去吧&#xff1f;必须要有一个边界 递归的…

国际标准引脚,宽范围工作温度–40℃ 到 105℃,3W 1.5KVDC 隔离单输出 DC/DC 电源模块 ——TPL-3W系列

TPL-3W系列是一款额定功率为3W的隔离产品&#xff0c;国际标准引脚&#xff0c;宽范围工作温度–40℃ 到 105℃&#xff0c;在此温度范围内都可以稳定输出3W&#xff0c;并且效率非常高&#xff0c;高达88%&#xff0c;同时负载调整率非常低&#xff0c;对于有输出电压精度有要…

失落的方舟台服封号的解决方法 怎么避免封号?

失落的方舟台服封号的解决方法 怎么避免封号&#xff1f; 失落的方舟这款游戏是由Smile Gate研发的MMORPG游戏&#xff0c;这款游戏将于5月30日正式开服。游戏采用虚幻3引擎&#xff0c;为玩家们提供了丰富的游戏玩法与精美的游戏画面。游戏的背景是在中世纪&#xff0c;玩家们…

JS将小数转化为整数

在JavaScript中,有多种方法可以将一个值转化为整数。以下是一些常用的方法: Number.parseInt() 或 parseInt()parseInt() 函数解析一个字符串参数,并返回一个指定基数的整数(基数介于2和36之间)。如果第一个字符不能被转换为数字,parseInt() 会返回 NaN。 let numString…

网络原理-------TCP协议

文章目录 TCP协议TCP协议段格式TCP原理确认应答机制 (安全机制)超时重传机制 (安全机制)连接管理机制 (安全机制)滑动窗口 (效率机制)流量控制 (安全机制)拥塞控制 (安全机制)延迟应答 (效率机制)捎带应答 (效率机制) 基于TCP的应用层协议 TCP协议 TCP, 即 Transmission Contr…

TypeScript 枚举

什么是 TypeScript 枚举&#xff1f; 简单来说&#xff0c;枚举是一种用于命名一组常量的数据类型。在 TypeScript 中&#xff0c;枚举允许我们定义一个命名的常量集合&#xff0c;并为这些常量分配相关的数值。通过枚举&#xff0c;我们可以为一组相关的值提供一个友好的名字…