纯css 实现呼吸灯效果

开始效果

呼吸效果

实现代码

html 复制代码
<div class="container">
	<div class="breathing-light"></div>
</div>

<style>
	html,
	body {
		height: 100%;
		background-color: white;
	}
	.container {
		padding: 100px;
	}
	.container .breathing-light {
		width: 20px;
		height: 20px;
		border-radius: 100%;
		animation: 2s shadowBreath ease-out infinite normal;
		background: rgba(42, 170, 255, 1);
	}
	@keyframes shadowBreath {
		0%,
		100% {
			transform: scale(0.9);
			box-shadow: 0 0 4px 1px rgba(42, 170, 255, 0.7);
		}
		50% {
			transform: scale(1.5);
			box-shadow: 0 0 30px 5px rgb(42, 170, 255);
		}
	}
</style>
相关推荐
石小石Orz21 分钟前
浏览器的预检请求OPTIONS到底有什么用?
前端
落雪小轩韩25 分钟前
网格布局 CSS Grid
前端·css
parade岁月27 分钟前
Vue 3 父子组件模板引用的时序陷阱与解决方案
前端
xianxin_32 分钟前
CSS Outline(轮廓)
前端
moyu8432 分钟前
遮罩层设计与实现指南
前端
Pedantic41 分钟前
用 SwiftUI 打造一个 iOS「设置」界面
前端
timeweaver1 小时前
深度解析 Nginx 前端 location 配置与优先级:你真的用对了吗?
前端·nginx·前端工程化
鲸落落丶1 小时前
网络通信---Axios
前端
wwy_frontend1 小时前
React性能优化实战:从卡顿到丝滑的8个技巧
前端·react.js
小高0071 小时前
面试官:npm run build 到底干了什么?从 package.json 到 dist 的 7 步拆解
前端·javascript·vue.js