html5编写天气,用HTML5动画表示微风天气

CSS

语言：

CSSSCSS

确定

body {

background-color: #90DBFF;

margin: 0;

height: 100%;

overflow: hidden;

}

@keyframes breeze {

0% {

transform: translateX(0);

opacity: 0.0;

}

10% {

opacity: 0.5;

}

100% {

transform: translateX(100vw);

opacity: 1.0;

}

}

@keyframes sway {

0% {

transform: translateX(0px)

}

25% {

transform: translateX(8px)

}

75% {

transform: translateX(-4px)

}

90% {

transform: translateX(5px)

}

100% {

transform: translateX(0px)

}

}

.content {

margin: 25vh auto 0;

text-align: center;

}

.cloud {

position: absolute;

display: inline-block;

z-index: -2;

}

.cloud-large {

height: 84px;

width: 207px;

opacity: 0.8;

animation: breeze 50s linear infinite;

}

.cloud-medium {

height: 56px;

width: 138px;

opacity: 0.6;

animation: breeze 70s linear infinite;

}

.cloud-small {

height: 28px;

width: 69px;

opacity: 0.4;

animation: breeze 90s linear infinite;

}

.cloud-one {

top: 15vh;

left: 2vw;

background: url('/uploads/161201/cloud.svg') no-repeat center/contain;

}

.cloud-two {

top: 20vh;

left: 60vw;

background: url('/uploads/161201/cloud-2.svg') no-repeat center/contain;

}

.cloud-three {

top: 10vh;

left: -20vw;

background: url('/uploads/161201/cloud-2.svg') no-repeat center/contain;

}

.cloud-four {

top: 25vh;

left: 40vw;

background: url('/uploads/161201/cloud.svg') no-repeat center/contain;

}

.cloud-five {

top: 40px;

left: 25vw;

background: url('/uploads/161201/cloud-2.svg') no-repeat center/contain;

}

.cloud-six {

top: 40px;

left: 75vw;

background: url('/uploads/161201/cloud.svg') no-repeat center/contain;

}

.tree {

margin: auto;

width: 0%;

position: relative;

}

.leaves {

position: absolute;

top: -55px;

z-index: 0;

height: 150px;

width: 150px;

border-radius: 300px;

opacity: 0.8;

animation: sway 5s ease infinite;

}

.tree-one {

left: -180px;

top: 70px;

z-index: 4;

}

.tree-two {

left: -100px;

top: -20px;

}

.tree-three {

left: -60px;

top: 40px;

z-index: 2;

}

.green {

background-color: #13CE66;

}

.light-green {

background-color: #AFEFCB;

}

.blue-green {

background-color: #50E3C2;

}

.light-blue-green {

background-color: #B2F3E4;

}

.trunk {

position: absolute;

left: 55px;

z-index: 1;

height: 188px;

width: 40px;

background: url('/uploads/161201/tree-trunk.svg') no-repeat center/contain;

}

.earth {

z-index: -1;

position: absolute;

top: 35vh;

height: 100%;

width: 100%;

background-color: #0F9F4F;

}