简单动画--css

最新推荐文章于 2023-05-21 14:03:51 发布

abbie

最新推荐文章于 2023-05-21 14:03:51 发布

阅读量302

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/abbie/article/details/74544843

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{padding: 0;
			  margin: 0;} 
			.sky{background-color: #007fd5; 
			height: 300px;
			position:relative ;
			animation:sky_backgroud 50s ease-in-out infinite ;}
			
			.cloudone{ 
			background: url(11.jpg);
			position:absolute;
			top:0;
			left:0;
			height: 100%;
			width: 300%;
			animation: cloudone 50s linear infinite;
			}
			
			.cloudtwo{ 
			background: url(12.jpg);
			position:absolute;
			top:0;
			left:0;
			height: 100%;
			width: 300%;
			animation: cloudtwo 75s linear infinite;
			}			
		
			.cloudthree{ 
			background: url(13.jpg);
			position:absolute;
			top:0;
			left:0;
			height: 100%;
			width: 300%;
			animation: cloudthree 100s linear infinite;
			}
			
			
			@keyframes cloudone{
				0%{
					left:0;
				}
				100%{left:-200%}
			}
			
				@keyframes cloudtwo{
				0%{
					left:0;
				}
				100%{left:-200%}
			}
				@keyframes cloudthree{
				0%{
					left:0;
				}
				100%{left:-200%}
			}
			
			@keyframes  sky{
				0%{
					background-color: #007FD5;
					color:#007FD5
				}
				50%{
					background-color: #3d9fff;
					color: #3d9fff;
				}
				100%{
					background-color: #007FD5;
	                color:#3D9FFF

				}
			}
		</style>
	</head>
	<body>
		<div  class="sky"> 
			 <div class="cloudone"> </div>
			 <div class="cloudtwo"> </div>
			 <div class="cloudthree"> </div>
		</div>
	</body>
</html>