CSS Rain

CSS Rain

css rain mean how to show rain effect in css , actually it really simple we need only two image one for background and other one for rain effect .


CSS Rain

1.Background image :

I prefer unsplash you can use any rain background image

2. Rain image :

it main rain image

3. little bit css

/*for background image*/section {
position: relative;
width: 100%;
height: 100vh;
background-image: url(https://images.unsplash.com/photo-1527277199115-b43f3dcf8a8a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80);
background-size: cover;
background-position: center;
}
/*adding rain img and making opacity 0*/section:before {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://media.geeksforgeeks.org/wp-content/uploads/20200828184719/rain-300x300.png);
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;
}
}
section {
position: relative;
width: 100%;
height: 100vh;
background-image: url(https://images.unsplash.com/photo-1527277199115-b43f3dcf8a8a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80);
background-size: cover;
background-position: center;
/*adding background to section and animation named color-change*/ animation: color-change 10s linear infinite;
animation-delay: 1s;
}
/* applying filter at different angle on diffrent interval using keyframe*/
@keyframes color-change {
0% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}


Post a Comment

Previous Post Next Post