天空云变化案例

最新推荐文章于 2022-11-10 11:19:26 发布

恬淡如雪

最新推荐文章于 2022-11-10 11:19:26 发布

阅读量61

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_48639265/article/details/126072862

版权

运用css设置云朵从白天渐渐到晚上再到白天的变化

代码：

<!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>
		* {
			padding: 0;
			margin: 0;
		}
		/* 设置背景样式 */
		.bg {
			height: 100vh;
			background-color: skyblue;
			animation: sky 10s linear  infinite;
		}
		/* 设置云彩样式 */
		.bg .cloud_one{
			width: 300%;
			height: 100%;
			background: url('../images/cloud_one.png') repeat-x;
			position: fixed;
			top: 0;
			left:0;
			animation: cloud 20s linear infinite;
		}
		.bg .cloud_two{
			width: 300%;
			height: 100%;
			background: url('../images/cloud_two.png') repeat-x;
			position: fixed;
			top: 0;
			left:0;
			animation: cloud 40s linear infinite;
		}
		.bg .cloud_three{
			width: 300%;
			height: 100%;
			background: url('../images/cloud_three.png') repeat-x;
			position: fixed;
			top: 0;
			left:0;
			animation: cloud 60s linear infinite;
		}
		/* 设置天空轮播 */
		@keyframes sky {
			0% {
				background-color: skyblue;
			}
			50% {
				background-color: #000;
			}
			100% {
				background-color: skyblue;
			}
		}
		/* 设置云彩轮播 */
		@keyframes cloud {
			from{
				left: 0;
			}
			to{
				left: -200%;
			}
		}
	</style>
</head>

<body>
	<div class="bg">
		<div class="cloud_one"></div>
		<div class="cloud_two"></div>
		<div class="cloud_three"></div>
	</div>
</body>

</html>