css动画实现呼吸路灯_纯css写个呼吸灯动画-CSDN博客

本文链接：https://blog.csdn.net/qq_42720683/article/details/96436361

利用css的动画可以实现一个呼吸灯：（此处是呼吸路灯）

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>
		<div class="lightOne"></div>
		<div class="lightTwo"></div>
		<div class="lightThree"></div>
		<div class="lightFour"></div>
		<div class="lightFive"></div>
	</div>
	<div>
		<div class="buildingOne"></div>
		<div class="buildingTwo"></div>
		<div class="buildingThree"></div>
		<div class="buildingFour"></div>
		<div class="buildingFive"></div>
	</div>
	<div>
		<div class="footer"></div>
	</div>
</body>
<style>
	.footer{
		width: 100%;
		height: 2px;
		background-color: white;
		position: absolute;
		bottom: 0.5%;
	}
	.buildingFive{
		height: 4px;
		width: 300px;
		background-color: white;
		position: absolute;
		right: 8%;
		bottom: 48%;
	}
	.buildingFour{
		height: 345px;
		width: 40px;
		background-color: white;
		position: absolute;
		right: 16%;
		bottom: 1%;
	}
	.buildingThree{
		width: 0; 
		height: 0; 
		border-left: 200px solid transparent; 
		border-right: 200px solid transparent; 
		border-bottom: 100px solid white; 
		position: absolute;
		right: 4.7%;
		bottom: 68%;
	}
	.buildingTwo{
		height: 150px;
		width: 4px;
		background-color: white;
		position: absolute;
		right: 25%;
		bottom: 48%;
	}
	.buildingOne{
		height: 150px;
		width: 4px;
		background-color: white;
		position: absolute;
		right: 10%;
		bottom: 48%;
	}
	@keyframes xpf{
		0%{
			opacity: 1;
		}
		50%{
			opacity: 0.4;
		}
		100%{
			opacity: 1;
		}
	}
	.lightFive{
		height: 130px;
		width: 130px;
		position: absolute;
		bottom: 53%;
		right: 13.2%;
		opacity: 0.7;
		border-radius: 100%;
		background-color: yellow;
		box-shadow: 0 0 50px yellow;
		animation: xpf 4s infinite;

	}
	.lightFour{
		height: 10px;
		width: 10px;
		position: absolute;
		top: 16%;
		right: 3%;
		border-radius: 100%;
		background-color: yellow;
		box-shadow: 0 0 50px yellow;
		animation: xpf 1s infinite;
	}
	.lightThree{
		width: 0; 
		height: 0; 
		border-left: 10px solid transparent; 
		border-right: 10px solid transparent; 
		border-bottom: 10px solid yellow; 
		position: absolute;
		right: 13%;
		top: 17%;
		animation: xpf 6s infinite;
	}
	.lightTwo{
		width: 0; 
		height: 0; 
		border-left: 10px solid transparent; 
		border-right: 10px solid transparent; 
		border-bottom: 10px solid yellow; 
		position: absolute;
		right: 10%;
		top: 10%;
		animation: xpf 4s infinite;
	}
	.lightOne{
		height: 10px;
		width: 10px;
		position: absolute;
		top: 5%;
		right: 5%;
		border-radius: 100%;
		background-color: yellow;
		box-shadow: 0 0 50px yellow;
		animation: xpf 2s infinite;
	}
	body{
		background-color: black;
		overflow: hidden;
	}
</style>
</html>