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

纯css实现一个div实现天气预报场景效果

代码语言：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;
.........完整代码请登录后点击上方下载按钮下载查看