To generate the rain and lightning effect, we will make use of CSS animations that allow animation of HTML elements.
We will use @keyframes that allow the animation to gradually change from the current style to the new style at certain times then we will use the filter:hue-rotate() to give the lightning effect.
- Add a background image in the section.
- To generate the rain effect add a background image of rain to the same section using section:before property of CSS.
- We will create an animation for a lightning effect named color-change for 10s and infinite time.
- To create a color-change animation we will use @keyframes and give the effect using property filter:hue-rotate(deg).
- To create a rain effect again we will use the @keyframes property and change the position of the background image for some interval.
Example:
html
<!DOCTYPE html><html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
/*adding background to section
and animation named color-change*/
section {
position: relative;
width: 100%;
height: 100vh;
background-image: url(
background-size: cover;
background-position: center;
animation: color-change 10s linear infinite;
animation-delay: 1s;
}
/*adding rain img and making opacity 0*/
section:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(
animation: rain 0.4s linear infinite;
opacity: 0;
}
/* just changing the position of image
of rain using keyframes*/
@keyframes rain {
0% {
background-position: 0 0;
opacity: 1;
}
100% {
background-position: 8% 80%;
opacity: 1;
}
}
/* applying filter at different angle
on different interval using keyframe*/
@keyframes color-change {
0% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<section></section>
</body>
</html>
|
Output: