div+css实现5款天气动态图标动画效果代码-html代码-BFW代码库

div+css实现5款天气动态图标动画效果代码

代码语言：html

代码描述：div+css实现5款天气动态图标动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url('https://fonts.googleapis.com/css?family=Raleway');
        body
        {
        
        	background:#fff	;
        }
        div
        {
        	width:130px;
        	height:130px;
        	border-radius: 40%;
        	z-index:120;
        }
        h1
        {
        font-family: 'Raleway', sans-serif;
        		 position: fixed;
        	left:30%;
          
        }
        .hot
        { position: absolute;
        	top:25%;
        	left:20%;
        	background:linear-gradient( to top right, rgba(255,87,34,1) 0%,
        	rgba(251,140,0 ,1) 100%);
        	box-shadow: 1px 1px 30px rgba(255,111,0 ,1);
        }
        .sun
        {
        	position: absolute;
        	top:-10%;
        	left:65%;
        	width:50px;
        	height: 50px;
        	border-radius: 100%;
        	background:linear-gradient( to bottom left, rgba(255,235,59,1) 0%,
        	rgba(249,168,37 ,1) 90%);
        	box-shadow: 1px 1px 30px rgba(255,160,0 ,1);
        	animation: inex 3s infinite linear ;
        	
        }
        
        .sunx
        {
        	position: absolute;
        	top:30%;
        	left:45%;
        	width:10px;
        	height: 10px;
        	border-radius: 100%;
        	background-color: #fff;
        	opacity:0.2;
        }
        .cloudy
        { position: absolute;
        	top:25%;
        	left:45%;
        	background:linear-gradient( to top right, rgba(63,81,181,1) 0%,
        	rgba(3,155,229 ,1) 40%);
        	box-shadow: 1px 1px 30px rgba(2,119,189 ,1);
        
        }
        .cloud
        {
        position: absolute;
        	top:5%;
        	left:70%;
        	width:60px;
        	height: 20px;
        	border-radius:10px;
        	backgrou.........完整代码请登录后点击上方下载按钮下载查看