#今日说码栏目# 第二十三集动画，旅行的热气球

最新推荐文章于 2024-10-15 14:59:12 发布

房东的_猪

最新推荐文章于 2024-10-15 14:59:12 发布

阅读量144

点赞数 7

文章标签： HTML5 CSS3 动画效果视觉设计前端开发

本文链接：https://blog.csdn.net/Abner_/article/details/126150752

版权

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>城市</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		div {
			width: 1500px;
			height: 750px;
			background: white;
			position: relative;
			overflow: hidden;
			margin: 0 auto;
			animation: background 30s infinite;
		}

		.thing1 {
			position: absolute;
			width: 1500px;
			bottom: 20px;
			z-index: 1;
		}

		.thing2 {
			position: absolute;
			left: 1150px;
			bottom: 0px;
			z-index: 3;
		}

		.thing3 {
			position: absolute;
			right: 350px;
			bottom: 0px;
			z-index: 3;
		}

		.thing4 {
			position: absolute;
			right: 1150px;
			bottom: 0px;
			z-index: 3;

		}

		.thing6 {
			position: absolute;
			right: 0px;
			bottom: 0px;
			z-index: 2;

		}

		.thing7 {
			position: absolute;
			right: 600px;
			bottom: 0px;
			z-index: 2;

		}

		.thing8 {
			position: absolute;
			bottom: 200px;
			right: 100px;
			z-index: 1;
		}

		.thing9 {
			position: absolute;
			bottom: 240px;
			right: 0px;
			z-index: 0;
		}

		.thing10 {
			position: absolute;
			bottom: 240px;
			left: 400px;
			z-index: 0;
		}

		.thing11 {
			position: absolute;
			left: 250px;
			bottom: 150px;
			z-index: 2;
		}

		.thing12 {
			position: absolute;
			left: 100px;
			bottom: 200px;
			z-index: 1;
		}

		.thing13 {
			position: absolute;
			left: 600px;
			bottom: 230px;
			z-index: 1;
		}

		.thing14 {
			position: absolute;
			left: 800px;
			bottom: 300px;
			z-index: 0;
		}

		.thing15 {
			position: absolute;
			bottom: 500px;
			animation: move 40s infinite;
			z-index: 1;
		}

		.thing16 {
			position: absolute;
			right: 130px;
			top: 300px;
			z-index: 2;
		}

		.thing5 {
			position: absolute;
			bottom: 50px;
			right: -180px;
			z-index: 5;
		}

		@keyframes move {
			0% {
				transform: translateX(1420px);
			}

			13% {
				transform: translateX(1050px) rotate(30deg);
			}

			26% {
				transform: translateX(680px) rotate(60deg);
			}

			39% {
				transform: translateX(310px) rotate(30deg);
			}

			50% {
				transform: translateX(-80px);
			}

			61% {
				transform: translateX(310px) rotate(30deg);
			}

			74% {
				transform: translateX(680px) rotate(60deg);
			}

			87% {
				transform: translateX(1050px) rotate(30deg);
			}

			100% {
				transform: translateX(1420px);
			}
		}

		@keyframes background {
			0% {
				background-color: #5A436C;
			}

			13% {
				background-color: #2D2242;
			}

			26% {
				background-color: #6F6366;
			}

			39% {
				background-color: #DDCCC2;
			}

			50% {
				background-color: #B9C6D1
			}

			61% {
				background-color: #DDCCC2;
			}

			74% {
				background-color: #6F6366;
			}

			87% {
				background-color: #2D2242;
			}

			100% {
				background-color: #5A436C;
			}
		}
	</style>
</head>

<body>
	<div>
		<img src="img\groundBack.png" alt="" class="thing1">
		<img src="img\groundFront.png" alt="" class="thing2">
		<img src="img\groundFront.png" alt="" class="thing3">
		<img src="img\groundFront.png" alt="" class="thing4">
		<img src="img\groundFront.png" alt="" class="thing5">
		<img src="img\groundMid.png" alt="" class="thing6">
		<img src="img\groundMid.png" alt="" class="thing7">
		<img src="img\Planetarium'png" alt="" class="thing8">
		<img src="img\skyline.png" alt="" class="thing9">
		<img src="img\skyline.png" alt="" class="thing10">
		<img src="img\friendshipShell.png" alt="" class="thing11">
		<img src="img\dowEventCenter.png" alt="" class="thing12">
		<img src="img\Glockenspiel.png" alt="" class="thing13">
		<img src="img\beans.png" alt="" class="thing14">
		<img src="img\balloon.png" alt="" class="thing15">
		<img src="img\Planetarium.png" alt="" class="thing16">
	</div>
</body>

</html>

效果如图所示：