帧动画-红绿灯

最新推荐文章于 2024-01-14 20:42:35 发布

网络喷子在线厮杀

最新推荐文章于 2024-01-14 20:42:35 发布

阅读量189

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/m0_65480869/article/details/126347046

版权

	<!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>
	.wrap {
	width: 350px;
	height: 150px;
	border: 5px solid #000;
	border-radius: 40px;
	margin: 100px auto;

	display: flex;
	justify-content: space-evenly;
	align-items: center;
	}

	.wrap div {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	animation: change .6s linear 1s infinite alternate;

	}

	.wrap div:nth-child(1) {
	background-color: tomato;
	}

	.wrap div:nth-child(2) {
	background-color: yellow;
	animation-delay: 1.2s;
	}

	.wrap div:nth-child(3) {
	background-color: green;
	animation-delay: 1.4s;
	}

	/* 1 - 0.5 - 1.2 */
	@keyframes change {
	0% {
	transform: scale(1);
	}

	50% {
	transform: scale(.5);
	}

	100% {
	transform: scale(1.2);
	}

	}
	</style>
	</head>

	<body>
	<div class="wrap">
	<div></div>
	<div></div>
	<div></div>
	</div>

	</body>

	</html>