web前端日常更新8.4

最新推荐文章于 2024-06-21 15:14:18 发布

W晚睡W

最新推荐文章于 2024-06-21 15:14:18 发布

阅读量152

点赞数 2

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_72174711/article/details/126164995

版权

今天依旧没有上新的内容，因为这两天一直在忙着项目的事情老师也就没有上新的内容，我就还是老样子，继续和大家介绍一下作业。

1.城市场景动画样式

2.城市场景动画代码样式

</head>
<body>
	<div>
	<img class="photo_1" src="../groundBack.png" alt="">
	<img class="photo_2" src="../groundFront.png" alt="">
	<img class="photo_2_2" src="../groundFront.p" alt="">
	<img class="photo_2_3" src="../groundFront.png" alt="">
	<img class="photo_2_4" src="../groundFront.png" alt="">
	<img class="photo_3" src="../groundMid.png" alt="">
	<img class="photo_3_2" src="../groundMid.png" alt="">
	<img class="photo_4" src="../Planetarium.png" alt="">
	<img class="photo_5" src="../skyline.png" alt="" >
	<img class="photo_5_2" src="../skyline.png" alt="">
	<img  class="photo_6" src="../friendshipShell.png" alt="">
	<img class="photo_7" src="../dowEventCenter.png" alt="">
	<img class="photo_8" src="../Glockenspiel.png" alt="">
	<img class="photo_9" src="../beans.png" alt="" >
	<img  class="photo_10" src="../balloon.png" alt="">
	
</div>
</body>
</html>

3.城市场景动画CSS样式

	*{
			margin: 0;
			padding: 0;
		}
		/* 整体 */
		div{
			width: 1500px;
			height: 750px;
			background: white;
			position: relative;
			overflow: hidden;
			margin: 0 auto;
			animation: setting 50s infinite;  
		}
		/* 第一张图片 */
		.photo_1{
			position: absolute;
			width: 1500px;
			bottom: 20px;
			z-index: 1;
		}
		/* 第二张极其附属 */
		.photo_2{
			position: absolute;
			left:1150px;
			bottom: 0px;
			z-index: 3;
		}

		.photo_2_2{
			position: absolute;
			right:350px;
			bottom: 0px;
			z-index: 3;
		}
		.photo_2_3{
			position: absolute;
			right:1150px;
			bottom: 0px;
			z-index: 3;
 
		}
		
		.photo_2_4{
			position: absolute;
			bottom: 50px;
			right: -180px;
			z-index: 5;
		}
		/* 第三张极其附属 */
		.photo_3{
			position: absolute;
			right:0px;
			bottom: 0px;
			z-index: 2;
 
		}
		.photo_3_2{
			position: absolute;
			right:600px;
			bottom: 0px;
			z-index: 2;
 
		}
		/* 第四张 */
		.photo_4{
			position: absolute;
			bottom: 200px;
			right: 100px;
			z-index: 1;
		}
		/* 第五张极其附属 */
		.photo_5{
			position: absolute;
			bottom: 240px;
			right: 0px;
			z-index: 0;
		}
		.photo_5_2{
			position: absolute;
			bottom: 240px;
			left: 400px;
			z-index: 0;
		}
		/* 第六张 */
		.photo_6{
			position: absolute;
			left: 250px;
			bottom: 150px;
			z-index: 2;
		}
		/* 第七张 */
		.photo_7{
			position: absolute;
			left: 100px;
			bottom: 200px;
			z-index: 1;
		}
		/* 第八张 */
		.photo_8{
			position: absolute;
			left: 600px;
			bottom: 230px;
			z-index: 1;
		}
		/* 第九张 */
		.photo_9{
			position: absolute;
			left: 800px;
			bottom: 300px;
			z-index: 0;
		}
		/* 第十张 */
		.photo_10{
			position: absolute;
			bottom: 500px;
			animation: move 50s infinite;  
			z-index: 1;
		}
	     /* 热气球动画效果 */
		@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 setting{
			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>