html 闪电的动态效果图,HTML5 CSS3实现的街道雷雨闪电动画

CSS

语言：

CSSSCSS

确定

* {

margin: 0;

padding: 0;

}

body {

overflow: hidden;

background: #fff;

}

.container {

width: 100vw;

height: 100vh;

background: url("/uploads/150201/old-street.jpg");

background-size: cover;

background-position: bottom;

animation: lightning 10s linear infinite;

transition: filter 5s;

}

.filtered {

filter: grayscale(100%);

}

.drop {

position: absolute;

bottom: 200px;

width: 1px;

height: 50px;

background: rgba(255, 255, 255, .3);

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 5px;

border-bottom-left-radius: 5px;

animation: rainFall .7s linear infinite;

}

.splash {

position: absolute;

width: 10px;

height: 1px;

border: 1px solid rgba(255, 255, 255, .3);

border-radius: 50%;

transform: scale(0);

}

.grayscaleButton {

color: #E04F70;

padding: 10px;

background: none;

border-top: #3CB356 2px solid;

border-bottom: #46A0D7 2px solid;

border-right: 2px solid #FD8B0C;

border-left: 2px solid purple;

border-radius: 20px;

text-transform: uppercase;

font-weight: 800;

display: block;

width: 150px;

position: absolute;

top: 10px;

left: calc(50% - 75px);

outline: none;

}

.slider {

position: absolute;

top: 80px;

left: calc(50% - 100px);

width: 200px;

}

@keyframes rainFall {

100% {

transform: translate(0px, 900px);

}

}

@keyframes splashing {

0% {

transform: scale(0)

}

100% {

transform: scale(.7);

}

}

@keyframes lightning {

0% {

opacity: 1;

}

1% {

opacity: 0.9;

}

2% {

opacity: 1;

}

3% {

opacity: 0.9;

}

4% {

opacity: 1;

}

80% {

opacity: 1;

}

81% {

opacity: 0.9;

}

82% {

opacity: 1;

}

}