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

有趣的css - 好看的呼吸灯效果

news 2026/5/23 23:19:12

整体效果

这个效果主要用 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…...

编程日记 2024/2/1 12:24:25

二叉树-堆应用（1）

目录堆排序整体思路代码实现 Q1建大堆/小堆 Q2数据个数和下标 TopK问题整体思路代码实现 Q1造数据CreateData Q2建大堆/小堆建堆的两种方法这里会用到前面的向上/向下调整/交换函数。向上调整&向下调整算法-CSDN博客堆排序整体思路建堆（直…...

编程日记 2024/2/1 12:21:22

猫头虎博主第10期赠书活动:《写给大家看的Midjourney设计书》

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能！ 专栏链接： 🔗 精选专栏： 《面试题大全》 — 面试准备的宝典！《IDEA开发秘籍》 — 提升你的IDEA技能！《100天精通Golang》…...

编程日记 2024/2/1 12:19:21

线程池相关的类学习

Executor public interface Executor {//执行任务void execute(Runnable command); }ExecutorService public interface ExecutorService extends Executor {//关闭线程池，不能再向线程池中提交任务，已存在与线程池中的任务会继续执行，直到…...

编程日记 2024/2/1 12:17:19

Redis核心技术与实战【学习笔记】 - 9.如何避免单线程模型的阻塞

概述 Redis 被广泛应用的原因是因为它支持高性能访问。所以，我们要重视所有可能影响 Redis 性能的因素（如命令操作、系统配置、关键机制、硬件配置等）。影响 Redis 性能的 5 大方面的潜在因素分别是： Redis 内部的阻塞式操作C…...

编程日记 2024/2/1 12:16:18

如何在 JavaScript 中使用 map() 迭代数组

简介从经典的 for 循环到 forEach() 方法，JavaScript 中有各种技术和方法用于遍历数据集。其中最流行的方法之一是 .map() 方法。.map() 通过在父数组的每个项目上调用特定函数来创建一个数组。.map() 是一个非变异方法，它创建一个新数组，而…...

编程日记 2024/2/1 12:12:14

学习JavaEE的日子 Day19 常用类

Day19 1.包装类的使用理解：8种基本数据类型对应类出现原因： Java为纯面向对象语言(万物皆对象)，8种基本数据类型不能new对象， 就破坏Java为纯面向对应语言的特征，Java又为8种基本数据类型分别匹配了对应的…...

编程日记 2024/2/1 12:11:13

25考研政治备考计划

各位小伙伴大家好，今天给大家分享的是25考研政治复习备考计划。政治没有基础阶段，直接就是强化，强化的内容也就是听课，刷题。【时间安排】 *7-9月中徐涛老师或腿姐强化课，推荐刷肖1000 *9月中-10月中背腿姐的背…...

编程日记 2024/2/1 12:08:11

漏洞01-目录遍历漏洞/敏感信息泄露/URL重定向

目录遍历漏洞/敏感信息泄露/URL重定向文章目录目录遍历敏感信息泄露URL重定向目录遍历敏感信息泄露于后台人员的疏忽或者不当的设计，导致不应该被前端用户看到的数据被轻易的访问到。比如： ---通过访问url下的目录，可以直接列出目录下…...

编程日记 2024/2/1 12:07:10

软件工程知识梳理4-详细设计

详细设计阶段的根本目标是确定应该怎样具体地实现所要求的系统，也就是说.经过这个阶段的设计工作.应该得出对目标系统的精确描述.从而在编码阶段可以把这个描述直接翻译成用某种程序设计语言书写的程序。详细设计的的目标不仅仅是逻辑上正确地实现每个模块地功能&a…...

编程日记 2024/2/1 12:06:09

Spring Boot3，启动时间缩短 10 倍！

前面松哥写了一篇文章和大家聊了 Spring6 中引入的新玩意 AOT（见Spring Boot3 新玩法，AOT 优化！）。文章发出来之后，有小伙伴问松哥有没有做性能比较，老实说，这个给落下了，所以今天…...

编程日记 2024/2/1 12:05:08

Picturesocial | 只要 5 分钟，发现容器编排的秘密武器！

在上一篇文章《Picturesocial | 开发实践：如何在 15 分钟内将应用容器化》，我们讨论了容器以及容器化应用程序所需的步骤。在不考虑将 container 部署到哪里的情况下创建 container，就像把家放在漂浮在海中的货运集装箱里一样，听起…...

编程日记 2024/2/1 12:04:07

GEE数据集——Umbra 卫星合成孔径雷达开放数据

Umbra 合成孔径雷达开放数据 Umbra 卫星生成的合成孔径雷达图像分辨率最高（优于 25 厘米/10 英寸）。合成孔径雷达卫星可以在夜间、透过云层、烟雾和雨水捕捉图像。合成孔径雷达具有监测变化的独特能力。开放数据计划（ODP）对全球十个不同地点进行监测。经常更新新图像。ODP …...

编程日记 2024/2/1 12:03:06

一个vue项目中通过iframe嵌套另外一个vue项目，如何让这两个项目进行通信

文章目录需求分析父传子子传父需求一个vue项目中通过iframe嵌套另外一个vue项目，如何让这两个项目之间进行通信分析在Vue项目中通过iframe嵌套另外一个Vue项目时，可以通过postMessage方法实现这两个项目之间的通信。postMessage是HTML5新增加的API…...

编程日记 2024/2/1 11:56:59

上班族学习方法系列文章目录

上班族学习方法系列文章目录文章目录上班族学习方法系列文章目录前言一、时间管理二、答题实战前言上班族如果想提高自己，那么就得掌握有效的学习方法和良好的时间管理。一、时间管理上班族有家有业，考证或者提高学历备考时间不充分。需要学会精…...

编程日记 2024/2/1 11:55:58

《Lua程序设计》-- 学习9

迭代器和泛型for 迭代器和闭包迭代器（iterator）是一种可以让我们遍历一个集合中所有元素的代码结构。在Lua语言中，通常使用函数表示迭代器：每一次调用函数时，函数会返回集合中的“下一个”元素。一个闭包就是一个…...

编程日记 2024/2/1 11:51:53

GIS应用水平考试一级—2009 年度第二次

全国信息化工程师——GIS应用水平考试 2009 年度第二次全国统一考试一级试卷说明: 1、本试卷共9页,6个大题,满分150 分,150 分钟完卷。 2、考试方式为闭卷考试。 3、将第一、二、三題的答案用铅笔涂写到(NCIE-GIS)答题卡上。 4、将第四、五、六题的答案填写到主观题答题卡上…...

编程日记 2024/2/1 11:49:52

【计算机视觉】万字长文详解：卷积神经网络

以下部分文字资料整合于网络，本文仅供自己学习用！ 一、计算机视觉概述如果输入层和隐藏层和之前一样都是采用全连接网络，参数过多会导致过拟合问题，其次这么多的参数存储下来对计算机的内存要求也是很高的解决这一问题&#x…...

编程日记 2024/2/1 11:48:51

Vue3项目封装一个Element-plus Pagination分页

前言:后台系统分页肯定是离不开的,但是ui框架都很多,我们可以定义封装一种格式,所有项目按到这个结构来做. 实例: 第一步:在项目components组件新建一个分页组件,用来进行封装组件. 第二步:根据官方的进行定义,官方提供的这些,需要我们封装成动态模式第三步:代码改造 <!-…...

编程日记 2024/2/1 11:47:50

node.js(nest.js控制器)学习笔记

nest.js控制器： 控制器负责处理传入请求并向客户端返回响应。为了创建基本控制器，我们使用类和装饰器。装饰器将类与所需的元数据相关联，并使 Nest 能够创建路由映射（将请求绑定到相应的控制器）。 1.获取get请求传参…...

编程日记 2024/2/1 11:46:49

揭秘当下匹克球鞋销售厂家，背后隐藏着怎样的行业秘密？

在运动市场中，匹克球运动正逐渐兴起，匹克球鞋销售厂家也受到了更多关注。下面，让我们深入探究其中的行业秘密。市场现状与痛点行业报告显示，随着匹克球运动的普及，匹克球鞋市场规模不断扩大，但也存在诸多痛…...

编程新知 2026/5/23 23:00:01

水壶装箱检测怎么做？一个独立开发者的实战经验

水壶装箱检测怎么做？一个独立开发者的实战经验作者：馒头 | 离散型智能制造项目经理 MES开发2年项目经理3年，主导过电子、机械行业的百万级MES项目。独立开发过一套装箱检测系统，从需求分析到上线落地全程主导。踩过的坑、走过…...

编程新知 2026/5/23 21:50:54

SeaweedFS S3网关实战：用s3cmd管理你的对象存储（从配置到常用命令）

SeaweedFS S3网关实战：从零构建高效对象存储工作流在云原生技术蓬勃发展的今天，轻量级、高性能的对象存储解决方案正成为开发者工具箱中不可或缺的一环。SeaweedFS凭借其简洁的架构和出色的性能，逐渐在中小规模存储场景中崭露头角。本文将带…...

编程新知 2026/5/23 21:48:53

保姆级教程：用STM32F103ZET6+超声波+红外模块，从零搭建一个能报警的智能循迹小车

从零构建STM32智能循迹避障小车的全流程实战指南在创客教育和嵌入式开发领域，智能小车一直是入门学习的经典项目。它不仅融合了传感器技术、电机控制和嵌入式编程等核心知识点，更能让学习者在完成一个完整产品的过程中获得成就感。本文将手把手带你使用…...

编程新知 2026/5/23 21:35:36

5G FWA智能终端技术解析：从核心原理到部署实践

1. 项目背景与行业意义最近在圈子里看到一则消息，美格智能的5G FWA智能终端产品成功中标了中国联通的招标项目。这消息乍一看像是普通的商业新闻，但对于我们这些常年泡在通信和物联网领域的人来说，这背后其实藏着不少值得琢磨的门道。它不仅仅…...

编程新知 2026/5/23 20:43:21

30岁之后IT人士(程序员)的职业规划是什么呢？

前段也看到ibm的寇卫东的一篇文章关于职业规划的，现在看看，这些职业规划都是理想状态下的产物，很多时候，限于我们自身水平、时间、空间的影响，很多是看着很美，其实却远远的达不到，不能仅仅说让人…...

编程新知 2026/5/23 19:30:04

【Elasticsearch从入门到精通】第15篇：Elasticsearch删除与更新API——精确操作与脚本更新

上一篇【第14篇】Elasticsearch文档检索API——GET、MGet与字段选择下一篇【第16篇】Elasticsearch批量操作API——Bulk、Reindex与跨集群索引摘要数据的删除和更新是Elasticsearch文档操作中不可或缺的环节。本文全面讲解了Elasticsearch删除与更新API的使用方法&#xff…...

编程新知 2026/5/23 19:17:39

Topit：终极免费macOS窗口置顶工具，让工作效率飙升300%

Topit：终极免费macOS窗口置顶工具，让工作效率飙升300% 【免费下载链接】Topit Pin any window to the top of your screen / 在Mac上将你的任何窗口强制置顶项目地址: https://gitcode.com/gh_mirrors/to/Topit 你是否经常在macOS上同时处理多个…...

编程新知 2026/5/23 19:15:30