变色动画

变色动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>教程(runoob.com)</title>
		<style>
			.box {
				width: 100px;
				height: 100px;
				background: red;
				animation: myfirst 5s;
				-webkit-animation: myfirst 5s;
				/* Safari and Chrome */
			}

			@keyframes myfirst {
				0% {
					background: red;
				}

				25% {
					background: yellow;
				}

				50% {
					background: blue;
				}

				100% {
					background: green;
				}
			}

			@-webkit-keyframes myfirst

			/* Safari 与 Chrome */
				{
				0% {
					background: red;
				}

				25% {
					background: yellow;
				}

				50% {
					background: blue;
				}

				100% {
					background: green;
				}
			}
		</style>
	</head>
	<body>

		<div class="box"></div>

	</body>
</html>
posted @ 2025-02-25 15:12  刘酸酸sour  阅读(3)  评论(0)    收藏  举报