master

分支 (1)

管理

管理

master

lee
/
呼吸灯动画.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{
			box-sizing: border-box;
		}
		div.article{
			width: 200px;
			height: 300px;
			background-color: black;
			margin:0 auto;
		}
		div.top{
			width: 200px;
			height: 200px;
			padding:20px;


			animation-name: outer;
			animation-duration: 5s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
		div#outer{
			height: 100%;
			border:5px solid #ccc;
			border-radius:50%;
			padding: 20px;

			animation-name: inner;
			animation-duration: 5s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;

		}

		div#inner{
			height: 100%;
			border:10px solid #ffff;
			border-radius: 50%;
		}

		div.text{
			color: #ffff;
			text-align: center;
		}

		/*外圆*/

		@keyframes outer{
			25%{
				padding:10px;
			}

			50%{
				padding: 20px;
			}

			100%{
				padding: 20px;
			}
		}

		/*内圆*/
		@keyframes inner{
			25%{
				padding: 30px
			}

			50%{
				padding: 20px;
			}

			75%{
				padding: 32px;
			}
			100%{
				padding: 20px;
			}
		}


	</style>
</head>
<body>
	<div class="article">
		<div class="top">
			<div id="outer">
				<div id="inner"></div>
			</div>
		</div>
		<div class="text">hi！</div>
	</div>
</body>
</html>