Rain Effect in CSS
Take a look at how to make a raindrops on Background, using HTML and CSS.
 |
| Rain effect |
<html>
<head>
<title> Rain Effect</title>
<style>
*{
margin:0px;
padding:0px;
}
.maindiv{
width:100%;
height:100vh;
background-image:url("bg.jpg");
background-repeat:no-repeat;
background-size:100% 100%;
}
.main{
height:100vh;
background-image:url("rain.png");
animation:main .4s linear infinite;
}
@keyframes main{
from{
background-position:0% 0%;
}
to{
background-position: 40% 100%;
}
</style>
</head>
<body>
<div class="maindiv">
<div class="main">
</div>
</div>
</body>
No comments:
Post a Comment