呼吸效果

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			width: 500px;
			height: 500px;
			margin: 40px auto;
			background-color: #2b92d4;
			border-radius: 50%;
			box-shadow: 0 1px 2px rgba(0, 0,0, .3);
			animation: breathe 1s ease-in-out infinite alternate;
		}
		@keyframes breathe{
			0%{
				opacity: 0.2;
				box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
			}
			50%{
				opacity: 0.5;
				box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76);
			}
			100%{
				opacity: 1;
				box-shadow: 0 1px 30px rgba(59, 255, 255, 1);
			}

		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>
posted @ 2022-10-26 22:03  原来是只呆燕  阅读(25)  评论(0)    收藏  举报