html场景动画,HTML5 CSS3场景动画：热情的沙漠

CSS

语言：

CSSSCSS

确定

body {

background: black;

}

.container {

position: relative;

width: 800px;

height: 600px;

background: #190721;

padding-top: 50px;

margin: 90px auto;

}

.desert {

position: relative;

width: 300px;

height: 550px;

background: -webkit-linear-gradient(top, rgba(86, 1, 39, 1) 0%, rgba(145, 2, 2, 1) 47%, rgba(241, 116, 50, 1) 100%);

background: linear-gradient(to bottom, rgba(86, 1, 39, 1) 0%, rgba(145, 2, 2, 1) 47%, rgba(241, 116, 50, 1) 100%);

margin: 0px auto;

overflow: hidden

}

.sol {

position: absolute;

width: 60px;

height: 60px;

background: -webkit-linear-gradient(top, rgba(241, 116, 50, 1) 0%, rgba(241, 116, 50, 0.26) 64%, rgba(241, 116, 50, 0) 86%);

background: linear-gradient(to bottom, rgba(241, 116, 50, 1) 0%, rgba(241, 116, 50, 0.26) 64%, rgba(241, 116, 50, 0) 86%);

border-radius: 100%;

box-shadow: -3px -5px 35px rgb(255, 149, 73);

margin: 162px 172px

}

.nubes,

.nubes3,

.nubes7,

.nubes9,

.nubes12 {

position: absolute;

width: 50px;

height: 50px;

border-radius: 100%;

background: -webkit-linear-gradient(top, rgba(241, 116, 50, .3) 0%, rgba(241, 116, 50, 0) 43%, rgba(241, 116, 50, 0) 73%);

background: linear-gradient(to bottom, rgba(241, 116, 50, .3) 0%, rgba(241, 116, 50, 0) 43%, rgba(241, 116, 50, 0) 73%);

}

.nubes {

margin: 142px 192px;

}

.nubes3 {

margin: 212px 132px;

}

.nubes7 {

margin: 102px 12px;

}

.nubes9 {

margin: 291px 12px;

}

.nubes12 {

margin: 360px 192px;

}

.nubes::before,

.nubes3::before,

.nubes7::before,

.nubes9::before,

.nubes12::before {

content: "";

position: absolute;

width: 40px;

height: 40px;

border-radius: 100%;

background: -webkit-linear-gradient(top, rgba(241, 116, 50, .3) 0%, rgba(241, 116, 50, 0) 43%, rgba(241, 116, 50, 0) 73%);

background: linear-gradient(to bottom, rgba(241, 116, 50, .3) 0%, rgba(241, 116, 50, 0) 43%, rgba(241, 116, 50, 0) 73%);

margin: -7px 30px;

}

.nubes::after,

.nubes3::after,

.nubes7::after,

.nubes9::after,

.nubes12::after {

content: "";

position: absolute;

width: 40px;

height: 40px;

border-radius: 100%;

background: -webkit-linear-gradient(top, rgba(241, 116, 50, .3) 0%, rgba(241, 116, 50, 0) 43%, rgba(241, 116, 50, 0) 73%);

background: linear-gradient(to bottom, rgba(241, 116, 50, .3) 0%, rgba(241, 116, 50, 0) 43%, rgba(241, 116, 50, 0) 73%);

margin: 12px 50px;

}

.cerro,

.cerro7,

.cerro12 {

position: absolute;

width: 261px;

height: 261px;

border-radius: 30px 0 0 0;

background: -webkit-linear-gradient(-45deg, rgba(255, 60, 53, 1) 0%, rgba(142, 23, 2, 1) 43%);

background: -webkit-linear-gradient(315deg, rgba(255, 60, 53, 1) 0%, rgba(142, 23, 2, 1) 43%);

background: linear-gradient(135deg, rgba(255, 60, 53, 1) 0%, rgba(142, 23, 2, 1) 43%);

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

overflow: hidden

}

.cerro {

margin: 450px 21px;

}

.cerro7 {

margin: 450px -53px;

-webkit-transform: rotate(45deg) scale(.7);

transform: rotate(45deg) scale(.7);

}

.cerro3,

.cerro9,

.cerro21 {

position: absolute;

width: 231px;

height: 231px;

border-radius: 100%;

background: -webkit-linear-gradient(-45deg, rgba(109, 16, 2, 1) 66%, rgba(255, 60, 53, 1) 100%);

background: -webkit-linear-gradient(315deg, rgba(109, 16, 2, 1) 66%, rgba(255, 60, 53, 1) 100%);

background: linear-gradient(135deg, rgba(109, 16, 2, 1) 66%, rgba(255, 60, 53, 1) 100%);

margin: -9px -162px

}

.cerro12 {

-webkit-transform: rotate(45deg) scale(.5);

transform: rotate(45deg) scale(.5);

margin: 412px 121px

}

.s1,

.s2,

.s3,

.s4,

.s5,

.s6,

.s7 {

position: absolute;

width: 9px;

height: 9px;

border-radius: 100%;

background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 199, 117, 1) 0%, rgba(249, 149, 0, 0.68) 46%, rgba(249, 149, 0, 0.31) 98%);

background: -webkit-radial-gradient(center ellipse, rgba(255, 199, 117, 1) 0%, rgba(249, 149, 0, 0.68) 46%, rgba(249, 149, 0, 0.31) 98%);

background: radial-gradient(ellipse at center, rgba(255, 199, 117, 1) 0%, rgba(249, 149, 0, 0.68) 46%, rgba(249, 149, 0, 0.31) 98%);

box-shadow: 0px 0px 9px rgba(255, 255, 255, .7);

}

.s1 {

margin: 21px 60px;

-webkit-animation: brilla 1.2s alternate infinite;

animation: brilla 1.2s alternate infinite;

}

.s2 {

margin: 70px 90px;

-webkit-transform: scale(.7);

transform: scale(.7);

-webkit-animation: brilla .9s alternate infinite;

animation: brilla .9s alternate infinite;

}

.s3 {

margin: 40px 142px;

-webkit-animation: brilla .7s alternate infinite;

animation: brilla .7s alternate infinite;

}

.s4 {

margin: 70px 201px;

-webkit-transform: scale(.7);

transform: scale(.7);

-webkit-animation: brilla .6s alternate infinite;

animation: brilla .6s alternate infinite;

}

.s5 {

margin: 21px 231px;

-webkit-animation: brilla .8s alternate infinite;

animation: brilla .8s alternate infinite;

}

.s6 {

margin: 50px 12px;

-webkit-transform: scale(.9);

transform: scale(.9);

-webkit-animation: brilla .6s alternate infinite;

animation: brilla .6s alternate infinite;

}

.s7 {

margin: 50px 271px;

-webkit-transform: scale(.9);

transform: scale(.9);

-webkit-animation: brilla .6s alternate infinite;

animation: brilla .6s alternate infinite;

}

@-webkit-keyframes brilla {

0% {

opacity: 0.3

}

100% {

opacity: 1

}

}

@keyframes brilla {

0% {

opacity: 0.3

}

100% {

opacity: 1

}

}