纯css实现一个div实现天气预报场景效果-html代码-BFW代码库

代码语言：html

代码描述：纯css实现一个div实现天气预报场景效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
<style>
    /* SUNNY */
.sunny { 
	-webkit-animation: sunny 15s linear infinite; 
	        animation: sunny 15s linear infinite;
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
	height: 140px;
	width: 20px; 
	margin-left: -15px;
	position: absolute;
	left: 90px;  
	top: 20px;
}
.sunny:before {
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
	content: ''; 
	height: 140px; 
	width: 20px;
	opacity: 1; 
	position: absolute;
	bottom: 0px;
	left: 0px; 
	-webkit-transform: rotate(90deg); 
	    -ms-transform: rotate(90deg); 
	        transform: rotate(90deg);
}
.sunny:after {
	background: #FFEE44; 
	border-radius: 50%; 
	box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
	content: '';  
	height: 80px;
	width: 80px;  
	position: absolute; 
	left: -30px; 
	top: 30px;
}
@-webkit-keyframes sunny { 
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes sunny { 
	0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* CLOUDY */
.cloudy {
	-webkit-animation: cloudy 5s ease-in-out infinite;
	        animation: cloudy 5s ease-in-out infinite;
	background: #FFFFFF;
	border-radius: 50%;
	box-shadow: 
		#FFFFFF 65px -15px 0 -5px, 
		#FFFFFF 25px -25px, 
		#FFFFFF 30px 10px, 
		#FFFFFF 60px 15px 0 -10px, 
		#FFFFFF 85px 5px 0 -5px;
	height: 50px;
	width: 50px; 
	margin-left: -60px;
	position: absolute;
	left: 255px;
	top: 70px; 
}
.cloudy:after {
	-webkit-animation: cloudy_shadow 5s ease-in-out infinite;
	        animation: cloudy_shadow 5s ease-in-out infinite;
	background: #000000;
	border-radius: 50%;
	content: '';
	height: 15px;
	width: 120px;
	opacity: 0.2;
	position: absolute;
	left: 5px; 
	bottom: -60px;
  -webkit-transform: scale(.7);
      -ms-transform: scale(.7);
          transform: scale(.7);
}
@-webkit-keyframes cloudy {
	50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@keyframes cloudy {
	50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@-webkit-keyframes cloudy_shadow {
	50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity:.05; }
}
@keyframes cloudy_shadow {
	50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity:.05; }
}

/* RAINY */
.rainy {
	-webkit-animation: rainy 5s ease-in-out infinite 1s;
	        animation: rainy 5s ease-in-out infinite 1s;
	background: #CCCCCC; 
	border-radius: 50%;
	box-shadow: 
		#CCCCCC 65px -15px 0 -5px, 
		#CCCCCC 25px -25px, 
		#CCCCCC 30px 10px, 
		#CCCCCC 60px 15px 0 -10px, 
		#CCCCCC 85px 5px 0 -5px;
	display: block;
	height: 50px;
	width: 50px;
	margin-left: -60px;
	position: absolute;
	left: 427px;
	top: 70px;
}
.rainy:after {
	-webkit-animation: rainy_shadow 5s ease-in-out infinite 1s;
	        animation: rainy_shadow 5s ease-in-out infinite 1s;
	background: #000000;
	border-radius: 50%;
	content: '';
	height: 15px;
	width: 120px;
	opacity: 0.2;
	position: absolute;
	left: 5px; 
	bottom: -60px;
	-webkit-transform: scale(.7);
	    -ms-transform: scale(.7);
	        transform: scale(.7);
}
.rainy:before {
	-webkit-animation: rainy_rain .7s infinite linear;.........完整代码请登录后点击上方下载按钮下载查看