共计 498 个字符，预计需要花费 2 分钟才能阅读完成。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title> 呼吸灯 </title>
/* 也可以通过加层罩，通过设置层罩透明度来实现亮度动画 */
<style>
body{background-color: black;}
div{
margin: 0 auto;
margin-top: 200px;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: yellow;
box-shadow: 0 0 80px red;
animation-name: light;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes light{
from{opacity: 1;}
to{opacity: 0.2;}
}
</style></head>
<body>
<div></div></body>
</html>
正文完