css城市公园下雪动画雪景效果代码
代码语言：html
所属分类：动画
代码描述：css城市公园下雪动画雪景效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
width: 100%;
display: block;
background: linear-gradient(#d2f0e6, #9ac8bb);
}
.background-linear{
position: fixed;
width: 100%;
height: 100%;
display: block;
background: linear-gradient(#d2f0e6, #9ac8bb);
z-index: 1;
}
.wrapper{
position: relative;
width: 100%;
display: block;
padding-top: 30px;
padding-bottom: 30px;
z-index: 2;
}
.winter-wrapper{
position: relative;
width: 600px;
height: 450px;
display: block;
margin: 0 auto;
z-index: 2;
overflow: hidden;
}
.winter-wrap{
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
overflow: hidden;
}
.snow-wrapper{
position: absolute;
top: -900px;
left: 0;
width: 600px;
height: 1350px;
display: block;
margin: 0 auto;
z-index: 200;
overflow: hidden;
animation: moveSnow-one 18s linear infinite;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.snow-wrapper.big{
top: -875px;
left: 10px;
animation: moveSnow-two 20s linear infinite;
}
@keyframes moveSnow-one {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(-20px, 8.33333333333333%);
}
50% {
transform: translate(-40px, 16.6666666666666%);
}
75% {
transform: translate(-20px, 24.99999999999999%);
}
100% {
transform: translate(0, 33.333333333333%);
}
}
@keyframes moveSnow-two {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(15px, 8.33333333333333%);
}
50% {
transform: translate(30px, 16.6666666666666%);
}
75% {
transform: translate(15px, 24.99999999999999%);
}
100% {
transform: translate(0, 33.333333333333%);
}
}
.snow-wrap{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 450px;
display: block;
margin: 0 auto;
z-index: 1;
overflow: hidden;
}
.snow-wrap.snd{
top: 450px;
}
.snow-wrap.trd{
top: 900px;
}
.snow-wrapper.big .snow-wrap span{
width: 3px;
height: 3px;
}
.snow-wrap span{
position: absolute;
top: 20px;
left: 20px;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #fefefe;
}
.snow-wrap span:nth-child(2){
top: 25px;
left: 70px;
}
.snow-wrap span:nth-child(3){
top: 30px;
left: 120px;
}
.snow-wrap span:nth-child(4){
top: 35px;
left: 180px;
}
.snow-wrap span:nth-child(5){
top: 20px;
left: 240px;
}
.snow-wrap span:nth-child(6){
top: 40px;
left: 310px;
}
.snow-wrap span:nth-child(7){
top: 30px;
left: 365px;
}
.snow-wrap span:nth-child(8){
top: 10px;
left: 415px;
}
.snow-wrap span:nth-child(9){
top: 20px;
left: 470px;
}
.snow-wrap span:nth-child(10){
top: 50px;
left: 535px;
}
.snow-wrap span:nth-child(11){
top: 35px;
left: 585px;
}
.snow-wrap span:nth-child(12){
top: 100px;
left: 15px;
}
.snow-wrap span:nth-child(13){
top: 90px;
left: 65px;
}
.snow-wrap span:nth-child(14){
top: 70px;
left: 135px;
}
.snow-wrap span:nth-child(15){
top: 80px;
left: 165px;
}
.snow-wrap span:nth-child(16){
top: 90px;
left: 215px;
}
.snow-wrap span:nth-child(17){
top: 60px;
left: 265px;
}
.snow-wrap span:nth-child(18){
top: 80px;
left: 305px;
}
.snow-wrap span:nth-child(19){
top: 110px;
left: 325px;
}
.snow-wrap span:nth-child(20){
top: 85px;
left: 375px;
}
.snow-wrap span:nth-child(21){
top: 95px;
left: 415px;
}
.snow-wrap span:nth-child(22){
top: 60px;
left: 465px;
}
.snow-wrap span:nth-child(23){
top: 75px;
left: 515px;
}
.snow-wrap span:nth-child(24){
top: 95px;
left: 545px;
}
.snow-wrap span:nth-child(25){
top: 65px;
left: 575px;
}
.snow-wrap span:nth-child(26){
top: 135px;
left: 55px;
}
.snow-wrap span:nth-child(27){
top: 145px;
left: 115px;
}
.snow-wrap span:nth-child(28){
top: 120px;
left: 175px;
}
.snow-wrap span:nth-child(29){
top: 105px;
left: 215px;
}
.snow-wrap span:nth-child(30){
top: 140px;
left: 230px;
}
.snow-wrap span:nth-child(31){
top: 125px;
left: 275px;
}
.snow-wrap span:nth-child(32){
top: 145px;
left: 335px;
}
.snow-wrap span:nth-child(33){
top: 105px;
left: 405px;
}
.snow-wrap span:nth-child(34){
top: 125px;
left: 475px;
}
.snow-wrap span:nth-child(35){
top: 140px;
left: 525px;
}
.snow-wrap span:nth-child(36){
top: 120px;
left: 590px;
}
.snow-wrap span:nth-child(37){
top: 180px;
left: 15px;
}
.snow-wrap span:nth-child(38){
top: 190px;
left: 60px;
}
.snow-wrap span:nth-child(39){
top: 210px;
left: 115px;
}
.snow-wrap span:nth-child(40){
top: 190px;
left: 160px;
}
.snow-wrap span:nth-child(41){
top: 175px;
left: 210px;
}
.snow-wrap span:nth-child(42){
top: 190px;
left: 245px;
}
.snow-wrap span:nth-child(43){
top: 175px;
left: 300px;
}
.snow-wrap span:nth-child(44){
top: 200px;
left: 340px;
}
.snow-wrap span:nth-child(45){
top: 195px;
left: 410px;
}
.snow-wrap span:nth-child(46){
top: 180px;
left: 490px;
}
.snow-wrap span:nth-child(47){
top: 210px;
left: 530px;
}
.snow-wrap span:nth-child(48){
top: 185px;
left: 585px;
}
.snow-wrap span:nth-child(49){
top: 235px;
left: 35px;
}
.snow-wrap span:nth-child(50){
top: 245px;
left: 95px;
}
.snow-wrap span:nth-child(51){
top: 220px;
left: 135px;
}
.snow-wrap span:nth-child(52){
top: 235px;
left: 205px;
}
.snow-wrap span:nth-child(53){
top: 250px;
left: 250px;
}
.snow-wrap span:nth-child(54){
top: 245px;
left: 315px;
}
.snow-wrap span:nth-child(55){
top: 225px;
left: 385px;
}
.snow-wrap span:nth-child(56){
top: 240px;
left: 425px;
}
.snow-wrap span:nth-child(57){
top: 255px;
left: 485px;
}
.snow-wrap span:nth-child(58){
top: 220px;
left: 515px;
}
.snow-wrap span:nth-child(59){
top: 245px;
left: 545px;
}
.snow-wrap span:nth-child(60){
top: 230px;
left: 575px;
}
.snow-wrap span:nth-child(61){
top: 280px;
left: 35px;
}
.snow-wrap span:nth-child(62){
top: 295px;
left: 85px;
}
.snow-wrap span:nth-child(63){
top: 300px;
left: 145px;
}
.snow-wrap span:nth-child(64){
top: 310px;
left: 205px;
}
.snow-wrap span:nth-child(65){
top: 270px;
left: 275px;
}
.snow-wrap span:nth-child(66){
top: 290px;
left: 335px;
}
.snow-wrap span:nth-child(67){
top: 265px;
left: 395px;
}
.snow-wrap span:nth-child(68){
top: 300px;
left: 415px;
}
.snow-wrap span:nth-child(69){
top: 285px;
left: 465px;
}
.snow-wrap span:nth-child(70){
top: 270px;
left: 535px;
}
.snow-wrap span:nth-child(71){
top: 290px;
left: 565px;
}
.snow-wrap span:nth-child(72){
top: 310px;
left: 595px;
}
.snow-wrap span:nth-child(73){
top: 350px;
left: 25px;
}
.snow-wrap span:nth-child(74){
top: 340px;
left: 70px;
}
.snow-wrap span:nth-child(75){
top: 350px;
left: 135px;
}
.snow-wrap span:nth-child(76){
top: 330px;
left: 190px;
}
.snow-wrap span:nth-child(77){
top: 320px;
left: 245px;
}
.snow-wrap span:nth-child(78){
top: 355px;
left: 300px;
}
.snow-wrap span:nth-child(79){
top: 345px;
left: 355px;
}
.snow-wrap span:nth-child(80){
top: 350px;
left: 415px;
}
.snow-wrap span:nth-child(81){
top: 320px;
left: 450px;
}
.snow-wrap span:nth-child(82){
top: 360px;
left: 495px;
}
.snow-wrap span:nth-child(83){
top: 355px;
left: 545px;
}
.snow-wrap span:nth-child(84){
top: 350px;
left: 575px;
}
.snow-wrap span:nth-child(85){
top: 390px;
left: 5px;
}
.snow-wrap span:nth-child(86){
top: 400px;
left: 55px;
}
.snow-wrap span:nth-child(87){
top: 380px;
left: 115px;
}
.snow-wrap span:nth-child(88){
top: 410px;
left: 175px;
}
.snow-wrap span:nth-child(89){
top: 385px;
left: 235px;
}
.snow-wrap span:nth-child(90){
top: 390px;
left: 305px;
}
.snow-wrap span:nth-child(91){
top: 370px;
left: 375px;
}
.snow-wrap span:nth-child(92){
top: 385px;
left: 425px;
}
.snow-wrap span:nth-child(93){
top: 405px;
left: 485px;
}
.snow-wrap span:nth-child(94){
top: 410px;
left: 515px;
}
.snow-wrap span:nth-child(95){
top: 395px;
left: 545px;
}
.snow-wrap span:nth-child(96){
top: 400.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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