css实现小岛风车下雪动画效果代码
代码语言：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;
}
/*冰層陰影-仿像素畫效果*/
.g2 {
position: absolute;
background: #72ccad;
width: 50px;
height: 140px;
right: -30px;
bottom: 0;
box-shadow: -10px 50px 0px #72ccad, -20px 70px 0px #72ccad,
-30px 80px 0px #72ccad, -40px 90px 0px #72ccad, -60px 100px 0px #72ccad,
-110px 110px 0px #72ccad;
/*用陰影仿出一格一格的效果*/
}
/*冰層透光處-仿像素畫效果*/
.g3 {
position: absolute;
background: #c6feeb;
width: 180px;
height: 20px;
top: 40px;
box-shadow: -80px 10px 0px #c6feeb, -130px 20px 0px #c6feeb,
-150px 30px 0px #c6feeb, -160px 40px 0px #c6feeb, -170px 50px 0px #c6feeb;
/*用陰影仿出一格一格的效果*/
}
/*------------群山------------*/
/*大山*/
.mountain_a {
position: absolute;
background: #eeeeee;
width: 780px;
height: 660px;
border-radius: 50%;
bottom: -240px;
left: 5%;
}
/*小山*/
.mountain_b {
position: absolute;
background: #e5e5e5;
width: 620px;
height: 460px;
border-radius: 50%;
left: 25%;
bottom: -80px;
}
/*------------房屋------------*/
/*定位房子*/
.house {
position: absolute;
bottom: 220px;
}
/*右邊一間*/
.house.right {
right: 10%;
}
/*左邊也一間*/
.house.left {
left: 12%;
}
/*牆壁的方形部分*/
.wall {
position: absolute;
background: #e2f4f4;
width: 80px;
height: 40px;
}
/*牆壁的三角部分*/
.wall:before {
content: "";
position: absolute;
background: transparent;
width: 0;
height: 0;
bottom: 40px;
border-bottom: 80px solid #e2f4f4;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
/*就是一些三角形設定*/
}
/*屋頂設定*/
.roof {
position: absolute;
background: #ffffff;
width: 100px;
height: 10px;
border-radius: 40px;
}
/*右邊屋頂*/
.roof.right {
left: 14px;
bottom: 30px;
transform: rotate(58deg);
}
/*左邊屋頂*/
.roof.left {
left: -34px;
bottom: 30px;
transform: rotate(-58deg);
}
/*房子的門*/
.door {
position: absolute;
background: #9acccb;
width: 20px;
height: 30px;
bottom: -40px;
left: 16px;
}
/*直柵欄*/
.fence {
position: absolute;
background: #ffffff;
width: 3px;
height: 30px;
bottom: -45px;
left: -20px;
border-radius: 3px;
box-shadow: -10px 0px 0px #ffffff, -20px 0px 0px #ffffff,
-30px 0px 0px #ffffff, -40px 0px 0px #ffffff, -50px 0px 0px #ffffff,
-60px 0px 0px #ffffff, -70px 0px 0px #ffffff;
/*用陰影做出其他的*/
}
/*橫柵欄*/
.fence:before {
content: "";
position: absolute;
background: #ffffff;
width: 72px;
height: 3px;
bottom: 22px;
right: 0;
box-shadow: 0px 14px 0px #ffffff;
/*用陰影做出其他的*/
}
/*------------植物------------*/
/*小樹樹幹*/
.tree_back {
position: absolute;
background: #348e8d;
width: 10px;
height: 15px;
bottom: 180px;
right: 30%;
}
/*小樹*/
.tree_back:before {
content: "";
position: absolute;
background: #e2f4f4;
width: 30px;
height: 60px;
border-radius: 50%;
bottom: 15px;
right: -10px;
}
/*大樹樹幹*/
.tree {
position: absolute;
background: #348e8d;
width: 10px;
height: 40px;
bottom: 180px;
right: 28%;
}
/*大樹*/
.tree:before {
content: "";
position: absolute;
background: #ffffff;
width: 40px;
height: 80px;
border-radius: 50%;
bottom: 25px;
left: -15px;
}
/*------------郵筒------------*/
/*郵筒a*/
.postbox_a {
position: absolute;
background: #73fffd;
width: 20px;
height: 25px;
bottom: 190px;
left: 35%;
animation-name: upppp;
animation-duration: 1s;
animation-iteration-count: infinite;
/*無限重複播放動畫*/
animation-timing-function: ease-in-out;
/*緩入緩出效果*/
animation-direction: alternate;
/*反向播放動畫*/
}
/*郵筒a的桿子*/
.postbox_a:after {
content: "";
position: absolute;
background: #76ecea;
width: 5px;
height: 20px;
bottom: -20px;
left: 8px;
}
/*所有的郵筒洞洞*/
.hole {
position: absolute;
background: #ffffff;
width: 6px;
height: 2px;
top: 5px;
left: 2px;
box-shadow: 10px 0px 0px rgba(100%, 100%, 100%);
}
/*郵筒b*/
.postbox_b {
position: absolute;
background: #2cb7b5;
width: 20px;
height: 25px;
bottom: 190px;
left: 37%;
animation-name: upppp;
animation-duration: 1s;
animation-delay: 1s;
/*晚一秒播放動畫*/
animation-iteration-count: infinite;
/*無限重複播放動畫*/
animation-timing-function: ease-in-out;
/*緩入緩出效果*/
animation-direction: alternate;
/*反向播放動畫*/
}
/*郵筒b的桿子*/
.postbox_b:after {
content: "";
position: absolute;
background: #348e8d;
width: 5px;
height: 20px;
bottom: -20px;
left: 8px;
}
/*郵筒上升動畫*/
@keyframes upppp {
100% {
transform: translatey(-10px);
}
}
/*------------雲朵------------*/
/*雲的底部*/
.cloud {
position: relative;
background: #ffffff;
width: 100px;
height: 40px;
top: 50px;
border-radius: 50px;
z-index: -1;
}
/*雲的突起*/
.cloud:after {
content: "";
position: absolute;
background: #ffffff;
width: 50px;
height: 50px;
border-radius: 50%;
top: -20px;
left: 10px;
}
/*雲的小突起*/
.cloud:before {
content: "";
position: absolute;
background: #ffffff;
width: 40px;
height: 40px;
border-radius: 50%;
top: -15px;
right: 20px;
}
/*雲a的動畫設定*/
.c1 {
top: 60px;
opacity: 0.5;
animation-name: moving;
animation-duration: 35s;
animation-iteration-count: infinite;
/*無限重複播放動畫*/
animation-timing-function: ease-in-out;
/*緩入緩出效果*/
}
/*雲b的動畫設定*/
.c2 {
top: 80px;
opacity: 0.8;
animation-name: moving;
animation-duration: 25s;
animation-iteration-count: infinite;
/*無限重複播放動畫*/
animation-timing-function: ease-in-out;
/*緩入緩出效果*/
}
/*雲c的動畫設定*/
.c3 {
top: 100px;
animation-name: moving;
animation-duration: 18s;
animation-iteration-count: infinite;
/*無限重複播放動畫*/
animation-timing-function: ease-in-out;
/*緩入緩出效果*/
}
/*所有雲的位移動畫*/
@keyframes moving {
0% {
margin-left: -200px;
}
100% {
margin-left: 105%;
}
}
/*------------風車------------*/
/*定位風車*/
.windmill {
position: absolute;
left: 50%;
bottom: 180px;
}
/*風車塔*/
.tower {
position: absolute;
background: transparent;
width: 60px;
height: 0;
border-top: 0px solid transparent;
border-bottom: 90px solid #e2f4f4;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
bottom: 0;
}
/*風車中間*/
.t1 {
position: absolute;
background: #2cb7b5;
width: 90px;
height: 10px;
bottom: 40px;
left: 5px;
}
/*塔門*/
.t1:before {
content: "";
position: absolute;
background: #2cb7b5;
width: 20px;
height: 20px;
bottom: -40px;
right: 35px;
box-shadow: 0px -54px 0px #2cb7b5;
/*二樓的窗*/
}
/*風車屋頂*/
.t2 {
position: absolute;
background: transparent;
width: 0;
height: 0;
border-bottom: 40px solid #2cb7b5;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
bottom: 90px;
left: 20px;
}
/*風車屋簷*/
.t2:after {
content: "";
position: absolute;
background: #2cb7b5;
width: 70px;
height: 10px;
border-radius: 10px;
bottom: -50px;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0