css实现小岛风车下雪动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现小岛风车下雪动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        /*If you want to post these css code on other website, please type my name and codepen link behind the code. Thanks :) */
        
        /*如要轉出codepen外的網站，請附上作者名稱，以及這裡的網址，感謝配合 :) */
        
        body {
          background: #ade3e3;
          margin: 0;
          /*背景填滿無邊界*/
          overflow: hidden;
          /*讓物件跑出背景時不會出現捲軸*/
        }
        
        /*------------天空------------*/
        
        /*天空第一層*/
        .sky {
          position: absolute;
          background: #96dada;
          width: 100%;
          height: 200px;
          z-index: -2;
        }
        
        /*天空第二層*/
        .deep_sky {
          position: absolute;
          background: #78c7c7;
          width: 100%;
          height: 100px;
        }
        
        /*天空第三層*/
        .deep_sky:before {
          content: "";
          position: absolute;
          background: #5fb4b4;
          width: 100%;
          height: 30px;
        }
        
        /*------------地面------------*/
        
        /*地層*/
        .ground {
          position: absolute;
          background: #a2e6cf;
          width: 100%;
          height: 180px;
          bottom: 0;
        }
        
        /*冰面*/
        .ice {
          position: absolute;
          background: #c7ede0;
          width: 100%;
          height: 40px;
        }
        
        /*冰面反光線*/
        .glare{
          position:absolute;
          background:#ffffff;
          width:95%;
          height:10px;
          top:0;
        }
        
        /*冰面反光第一層-仿像素畫效果*/
        .glare:before{
          content:"";
          position:absolute;
          background:#c7ede0;
          width:10px;
          height:10px;
          bottom:0;
          left:40%;
          box-shadow:-10px 0px 0px #e3f7f0,5px 0px 0px #c7ede0,10px 0px 0px #c7ede0,15px 0px 0px #c7ede0,20px 0px 0px #c7ede0,25px 0px 0px #c7ede0,30px 0px 0px #c7ede0,35px 0px 0px #c7ede0,40px 0px 0px #c7ede0,-140px 10px 0px #e3f7f0,-150px 10px 0px #ffffff,-155px 10px 0px #ffffff,-160px 10px 0px #ffffff,-165px 10px 0px #ffffff,-170px 10px 0px #ffffff,-175px 10px 0px #ffffff,-180px 10px 0px #ffffff,-185px 10px 0px #ffffff,-190px 10px 0px #ffffff,-195px 10px 0px #ffffff,-200px 10px 0px #ffffff,-180px 20px 0px #e3f7f0,-280px 10px 0px #e3f7f0,-290px 10px 0px #ffffff,-295px 10px 0px #ffffff,-300px 10px 0px #ffffff,-305px 10px 0px #ffffff,-310px 10px 0px #ffffff,-315px 10px 0px #ffffff,-320px 10px 0px #ffffff,-325px 10px 0px #ffffff,-330px 10px 0px #ffffff,-335px 10px 0px #ffffff,-340px 10px 0px #ffffff,-345px 10px 0px #ffffff,-350px 10px 0px #ffffff;
        }
        
        /*冰面反光第二層-仿像素畫效果*/
        .glare:after{
          content:"";
          position:absolute;
          background:#c7ede0;
          width:10px;
          height:10px;
          bottom:0;
          right:0;
          box-shadow:-10px 0px 0px #e3f7f0,-200px 0px 0px #c7ede0,-205px 0px 0px #c7ede0,-210px 0px 0px #c7ede0,-215px 0px 0px #c7ede0,-220px 0px 0px #c7ede0,-225px 0px 0px #c7ede0,-230px 0px 0px #c7ede0,-240px 0px 0px #e3f7f0,-250px 0px 0px #c7ede0,-255px 0px 0px #c7ede0,-260px 0px 0px #c7ede0,-270px 0px 0px #e3f7f0,-120px 10px 0px #e3f7f0,-130px 10px 0px #ffffff,-135px 10px 0px #ffffff,-140px 10px 0px #ffffff,-145px 10px 0px #ffffff,-150px 10px 0px #ffffff,-350px 10px 0px #e3f7f0,-360px 10px 0px #ffffff,-365px 10px 0px #ffffff,-370px 10px 0px #ffffff,-375px 10px 0px #ffffff,-380px 10px 0px #ffffff,-385px 10px 0px #ffffff,-390px 10px 0px #ffffff,-395px 10px 0px #ffffff,-400px 10px 0px #ffffff,-405px 10px 0px #ffffff,-410px 10px 0px #ffffff
        }
        
        /*冰面陰影線*/
        .ice_shadow{
          position:absolute;
          background: #84bba8;
          width: 100%;
          height: 10px;
          bottom:-10px;
        }
        
        /*冰面陰影第一層-仿像素畫效果*/
        .ice_shadow:before {
          content: "";
          position: absolute;
          background: #a2d1c1;
          width: 10px;
          height: 10px;
          bottom: 0;
          left:20%;
          box-shadow:10px 0px 0px #a3e2cd,95px -10px 0px #84bba8,100px -10px 0px #84bba8,105px -10px 0px #84bba8,110px -10px 0px #84bba8,115px -10px 0px #84bba8,120px -10px 0px #84bba8,125px -10px 0px #84bba8,130px -10px 0px #84bba8,135px -10px 0px #a2d1c1,140px -10px 0px #a2d1c1,400px 0px 0px #a2d1c1,410px 0px 0px #a3e2cd;
        }
        
        /*冰面陰影第二層-仿像素畫效果*/
        .ice_shadow:after{
          content: "";
          position: absolute;
          background: #84bba8;
          width: 20px;
          height: 10px;
          bottom: 10px;
          right:10%;
          box-shadow:10px 0px 0px #a2d1c1,-20px 0px 0px #84bba8,-140px 0px 0px #84bba8,-160px 0px 0px #84bba8,-170px 0px 0px #84bba8,-180px 0px 0px #84bba8,-190px 0px 0px #84bba8;
        }
        
        /*冰層陰影-底部*/
        .g1 {
          position: absolute;
          background: #72ccad;
          width: 100%;
          height: 20px;
          bottom: 0;
        }
        
        /*.........完整代码请登录后点击上方下载按钮下载查看