共计 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>
正文完