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