利用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>