有趣的css - 好看的呼吸灯效果
整体效果
这个效果主要用 css3 的 animation 属性来实现的。
这个效果可以用作在网站的整体 Loading，也可以放在网站首屏当一个 banner 的背景也是非常棒的！
代码部分
html 部分代码：
<div class="app"><span class="red"></span><span class="green"></span><span class="blue"></span>
</div>
写出三个圆，class 分别为 .red、.green、.blue。
css 部分代码：
.app{width:100%;height: 100vh;display: flex;justify-content: center;align-items: center;
}
span{width: 60px;height: 60px;margin: 40px;border-radius: 50%;
}
.red{animation: just1 2s ease-in-out infinite alternate;
}
.green{animation: just2 3s ease-in-out infinite alternate;
}
.blue{animation: just3 4s ease-in-out infinite alternate;
}
@keyframes just1{0%{border: 5px solid rgba(255,0,0,0);box-shadow: 0 0 0 rgba(255,0,0,0),0 0 0 rgba(255,0,0,0) inset;}100%{border: 5px solid rgba(255,0,0,1);box-shadow: 0 0 70px rgba(255,0,0,0.7),0 0 15px rgba(255,0,0,0.5) inset;}
}
@keyframes just2{0%{border: 5px solid rgba(0,255,0,0);box-shadow: 0 0 0 rgba(0,255,0,0),0 0 0 rgba(0,255,0,0) inset;}100%{border: 5px solid rgba(0,255,0,1);box-shadow: 0 0 70px rgba(0,255,0,0.7),0 0 15px rgba(0,255,0,0.5) inset;}
}
@keyframes just3{0%{border: 5px solid rgba(0,0,255,0);box-shadow: 0 0 0 rgba(0,0,255,0),0 0 0 rgba(0,0,255,0) inset;}100%{border: 5px solid rgba(0,0,255,1);box-shadow: 0 0 70px rgba(0,0,255,0.7),0 0 15px rgba(0,0,255,0.5) inset;}
}
css 部分主要使用 animation 来实现边框及其阴影的大小变化，和其透明度的变化。
完整代码如下
html 页面：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>好看的呼吸灯效果</title>
</head>
<body><div class="app"><span class="red"></span><span class="green"></span><span class="blue"></span></div>
</body>
</html>
css 样式：
/** style.css **/*{margin:0;padding: 0;
}
body,html{background-color: #000;
}
.app{width:100%;height: 100vh;display: flex;justify-content: center;align-items: center;
}
span{width: 60px;height: 60px;margin: 40px;border-radius: 50%;
}
.red{animation: just1 2s ease-in-out infinite alternate;
}
.green{animation: just2 3s ease-in-out infinite alternate;
}
.blue{animation: just3 4s ease-in-out infinite alternate;
}
@keyframes just1{0%{border: 5px solid rgba(255,0,0,0);box-shadow: 0 0 0 rgba(255,0,0,0),0 0 0 rgba(255,0,0,0) inset;}100%{border: 5px solid rgba(255,0,0,1);box-shadow: 0 0 70px rgba(255,0,0,0.7),0 0 15px rgba(255,0,0,0.5) inset;}
}
@keyframes just2{0%{border: 5px solid rgba(0,255,0,0);box-shadow: 0 0 0 rgba(0,255,0,0),0 0 0 rgba(0,255,0,0) inset;}100%{border: 5px solid rgba(0,255,0,1);box-shadow: 0 0 70px rgba(0,255,0,0.7),0 0 15px rgba(0,255,0,0.5) inset;}
}
@keyframes just3{0%{border: 5px solid rgba(0,0,255,0);box-shadow: 0 0 0 rgba(0,0,255,0),0 0 0 rgba(0,0,255,0) inset;}100%{border: 5px solid rgba(0,0,255,1);box-shadow: 0 0 70px rgba(0,0,255,0.7),0 0 15px rgba(0,0,255,0.5) inset;}
}
页面效果：
以上就是所有代码，css3 有很多好玩的属性，可以实现非常多的效果，让页面视觉变的更丰富多彩!
[1] 阅读原文
我是 Just ，这里是「设计师工作日常」,求点赞求关注！！！`
相关文章：
有趣的css - 好看的呼吸灯效果
整体效果 这个效果主要用 css3 的 animation 属性来实现的。 这个效果可以用作在网站的整体 Loading，也可以放在网站首屏当一个 banner 的背景也是非常棒的！ 代码部分 html 部分代码： <div class"app"><span class&quo…...
二叉树-堆应用（1）
目录 堆排序 整体思路 代码实现 Q1建大堆/小堆 Q2数据个数和下标 TopK问题 整体思路 代码实现 Q1造数据CreateData Q2建大堆/小堆 建堆的两种方法这里会用到前面的向上/向下调整/交换函数。向上调整&向下调整算法-CSDN博客 堆排序 整体思路 建堆（直…...
猫头虎博主第10期赠书活动:《写给大家看的Midjourney设计书》
博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能！ 专栏链接： 🔗 精选专栏： 《面试题大全》 — 面试准备的宝典！《IDEA开发秘籍》 — 提升你的IDEA技能！《100天精通Golang》…...
线程池相关的类学习
Executor public interface Executor {//执行任务void execute(Runnable command); }ExecutorService public interface ExecutorService extends Executor {//关闭线程池，不能再向线程池中提交任务，已存在与线程池中的任务会继续执行，直到…...
Redis核心技术与实战【学习笔记】 - 9.如何避免单线程模型的阻塞
概述 Redis 被广泛应用的原因是因为它支持高性能访问。所以，我们要重视所有可能影响 Redis 性能的因素（如命令操作、系统配置、关键机制、硬件配置等）。 影响 Redis 性能的 5 大方面的潜在因素分别是： Redis 内部的阻塞式操作C…...
 迭代数组)
如何在 JavaScript 中使用 map() 迭代数组
简介 从经典的 for 循环到 forEach() 方法，JavaScript 中有各种技术和方法用于遍历数据集。其中最流行的方法之一是 .map() 方法。.map() 通过在父数组的每个项目上调用特定函数来创建一个数组。.map() 是一个非变异方法，它创建一个新数组，而…...
学习JavaEE的日子 Day19 常用类
Day19 1.包装类的使用 理解：8种基本数据类型对应类 出现原因： Java为纯面向对象语言(万物皆对象)，8种基本数据类型不能new对象， 就破坏Java为纯面向对应语言的特征，Java又为8种基本数据类型分别 匹配了对应的…...
25考研政治备考计划
各位小伙伴大家好，今天给大家分享的是25考研政治复习备考计划。 政治没有基础阶段，直接就是强化，强化的内容也就是听课，刷题。 【时间安排】 *7-9月中 徐涛老师或腿姐强化课，推荐刷肖1000 *9月中-10月中 背腿姐的背…...
漏洞01-目录遍历漏洞/敏感信息泄露/URL重定向
目录遍历漏洞/敏感信息泄露/URL重定向 文章目录 目录遍历敏感信息泄露URL重定向 目录遍历 敏感信息泄露 于后台人员的疏忽或者不当的设计，导致不应该被前端用户看到的数据被轻易的访问到。 比如： ---通过访问url下的目录，可以直接列出目录下…...
软件工程知识梳理4-详细设计
详细设计阶段的根本目标是确定应该怎样具体地实现所要求的系统，也就是说.经过这个阶段的设计工作.应该得出对目标系统的精确描述.从而在编码阶段可以把这个描述直接翻译成用某种程序设计语言书写的程序。 详细设计的的目标不仅仅是逻辑上正确地实现每个模块地功能&a…...
Spring Boot3，启动时间缩短 10 倍！
前面松哥写了一篇文章和大家聊了 Spring6 中引入的新玩意 AOT（见Spring Boot3 新玩法，AOT 优化！）。 文章发出来之后，有小伙伴问松哥有没有做性能比较，老实说，这个给落下了，所以今天…...
Picturesocial | 只要 5 分钟，发现容器编排的秘密武器！
在上一篇文章《Picturesocial | 开发实践：如何在 15 分钟内将应用容器化》，我们讨论了容器以及容器化应用程序所需的步骤。在不考虑将 container 部署到哪里的情况下创建 container，就像把家放在漂浮在海中的货运集装箱里一样，听起…...
GEE数据集——Umbra 卫星合成孔径雷达开放数据
Umbra 合成孔径雷达开放数据 Umbra 卫星生成的合成孔径雷达图像分辨率最高（优于 25 厘米/10 英寸）。合成孔径雷达卫星可以在夜间、透过云层、烟雾和雨水捕捉图像。合成孔径雷达具有监测变化的独特能力。开放数据计划（ODP）对全球十个不同地点进行监测。经常更新新图像。ODP …...
一个vue项目中通过iframe嵌套另外一个vue项目，如何让这两个项目进行通信
文章目录 需求分析父传子子传父 需求 一个vue项目中通过iframe嵌套另外一个vue项目，如何让这两个项目之间进行通信 分析 在Vue项目中通过iframe嵌套另外一个Vue项目时，可以通过postMessage方法实现这两个项目之间的通信。postMessage是HTML5新增加的API…...
上班族学习方法系列文章目录
上班族学习方法系列文章目录 文章目录 上班族学习方法系列文章目录前言一、时间管理二、答题实战 前言 上班族如果想提高自己，那么就得掌握有效的学习方法和良好的时间管理。 一、时间管理 上班族有家有业，考证或者提高学历备考时间不充分。需要学会精…...
《Lua程序设计》-- 学习9
迭代器和泛型for 迭代器和闭包 迭代器（iterator）是一种可以让我们遍历一个集合中所有元素的代码结构。在Lua语言中，通常使用函数表示迭代器：每一次调用函数时，函数会返回集合中的“下一个”元素。 一个闭包就是一个…...
GIS应用水平考试一级—2009 年度第二次
全国信息化工程师——GIS应用水平考试 2009 年度第二次全国统一考试一级 试卷说明: 1、本试卷共9页,6个大题,满分150 分,150 分钟完卷。 2、考试方式为闭卷考试。 3、将第一、二、三題的答案用铅笔涂写到(NCIE-GIS)答题卡上。 4、将第四、五、六题的答案填写到主观题答题卡上…...
【计算机视觉】万字长文详解：卷积神经网络
以下部分文字资料整合于网络，本文仅供自己学习用！ 一、计算机视觉概述 如果输入层和隐藏层和之前一样都是采用全连接网络，参数过多会导致过拟合问题，其次这么多的参数存储下来对计算机的内存要求也是很高的 解决这一问题&#x…...
Vue3项目封装一个Element-plus Pagination分页
前言:后台系统分页肯定是离不开的,但是ui框架都很多,我们可以定义封装一种格式,所有项目按到这个结构来做. 实例: 第一步:在项目components组件新建一个分页组件,用来进行封装组件. 第二步:根据官方的进行定义,官方提供的这些,需要我们封装成动态模式 第三步:代码改造 <!-…...
node.js(nest.js控制器)学习笔记
nest.js控制器： 控制器负责处理传入请求并向客户端返回响应。 为了创建基本控制器，我们使用类和装饰器。装饰器将类与所需的元数据相关联，并使 Nest 能够创建路由映射（将请求绑定到相应的控制器）。 1.获取get请求传参…...
像素幻梦·创意工坊应用场景：独立音乐人专辑封面像素艺术生成流程
像素幻梦创意工坊应用场景：独立音乐人专辑封面像素艺术生成流程 1. 引言：像素艺术在音乐视觉中的价值 在数字音乐时代，专辑封面依然是艺术家表达音乐理念的重要载体。对于独立音乐人而言，独特的视觉风格往往能成为作品的标志性符…...
轻量化之路：使用模型剪枝与量化技术压缩卡证检测模型
轻量化之路：使用模型剪枝与量化技术压缩卡证检测模型 1. 引言 你有没有遇到过这样的场景？想把一个识别身份证、银行卡的AI模型塞进手机App里，或者部署到一台小小的工控机上，结果发现模型动辄几百兆，跑起来慢吞吞&…...
[Android] 鲁迅全集 7.2.0
[Android] 鲁迅全集 7.2.0 链接：https://pan.xunlei.com/s/VOp2ylhHGYlTTbQ2rTOhsk3RA1?pwdh6tu# 鲁迅作品全集！！！...
避坑指南：PyTorch QAT模型部署时，你的推理结果为什么对不上？从量化参数到计算细节的排查思路
PyTorch QAT模型部署实战：量化推理结果异常的全链路诊断手册 当你的量化感知训练（QAT）模型在部署环节突然"翻车"——推理结果与训练时相差甚远，这种场景就像精心调制的咖啡在最后一刻被打翻。本文将带你深入量化模型的黑…...
车载Java OTA升级崩溃率从18.7%降至0.3%：基于Delta Patch + 类隔离热修复的4步标准化流程
第一章：车载Java OTA升级崩溃率从18.7%降至0.3%：基于Delta Patch 类隔离热修复的4步标准化流程在车载嵌入式Java环境（JVM 11，ART兼容层）中，OTA升级引发的ClassCastException与NoClassDefFoundError曾导致高…...
AI写论文超厉害！4款AI论文生成工具，解决毕业论文写作难题！
还在为撰写期刊论文而烦恼吗？面对成堆的文献、复杂的格式要求以及无休止的修改，许多学术人员常常感到效率低下。这并不奇怪！不过，不必太担心，以下将推荐4款实测有效的AI论文写作工具，它们能帮助你在论文文献…...
3D打印雕塑与玻璃钢雕塑的区别、工艺详解及定制雕塑相关疑问解答
3D打印雕塑与玻璃钢雕塑的区别、工艺详解及定制雕塑相关疑问解答3D打印雕塑与玻璃钢雕塑是当代主流雕塑工艺，核心差异在于成型逻辑与材料特性：3D打印以数字化建模为核心，遵循“分层叠加”的增材逻辑；玻璃钢以复合材料为基础&#…...
FastMind：比 LangGraph 更轻量的 Python Agent 框架
在 AI Agent 开发领域，LangGraph 是一个知名的框架，但如果你正在寻找一个更轻量、更简洁、更适合快速开发的替代方案，那么 FastMind 值得你关注。 项目定位 LangGraph 定位: 企业级 Agent 开发框架特点: 功能全面，支持复杂工作流复…...
PrivLLM 协变混淆：隐私保护的 LLM 推理高效实现
用户接入云上大模型（LLM）时，通常面临端-云数据交互如提示词上传等隐私泄露风险。常规脱敏和加密手段难以同时保障数据安全隐私和推理高效准确，陷入“安全”与“智能”不可兼得的困局。为此，字节跳动安全研究团队提出了…...
CanFestival主站PDO配置避坑指南：以Kinco FD伺服的速度/位置模式控制为例
CanFestival主站PDO配置实战：从零解析Kinco FD伺服双模式控制 当你在深夜的实验室里盯着屏幕上闪烁的CAN报文，却发现伺服电机对控制指令毫无反应时，那种挫败感每个工控开发者都深有体会。本文将带你穿透CanFestival主站配置的迷雾，…...