Blog

This blog is for everybody that loves technology

rain effect by html and css without javascript

rain effect by html and css without javascript

hello guys!

in this article , i am going to provide you, rain effect source code . in this you can create a very beautiful rain effect just by html and css and you don’t have to use any javascript. so lets start



SOURCE CODE IS HERE

<!DOCTYPE html>
<html>
<head>
<title>raining effect</title>
<style type=”text/css”>
*
{
margin: 0;
padding: 0;
background: url(https://images.pexels.com/photos/1529881/pexels-photo-1529881.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.rain
{

height: 100vh;
background: url(rain.png);
animation: rain .3s linear infinite;
position: relative;
}
.rain:before
{
content: ”;
position: absolute;
width: 100%;
height: 100%;
background: #fff;
animation: lighting 3s linear infinite;
opacity: 0;
}
@keyframes rain
{
0%
{
background-position: 0% 0%;
}
100%
{
background-position: 20% 100%;
}
}
@keyframes lighting
{
0%
{
opacity: 0;
}
10%
{
opacity: 0;
}
11%
{
opacity: 1;
}
14%
{
opacity: 0;
}
20%
{
opacity: 0;
}
21%
{
opacity: 1;
}
24%
{
opacity: 0;
}
104%
{
opacity: 0;
}
}
.rain h1
{
position: absolute;
}
</style>
</head>
<body>
<div class=”rain”>

</div>
</body>
</html>

 



Share on facebook
Share on whatsapp
Share on twitter
Share on telegram
Share on email

Related Articals

WE CREATES WEBSITES

LEARN WEBSITE DESIGNING COURSE ONLINE

We will teach you html5, css3, photoshop, bootstrap, media query, wordpress, sql, php.

Sandeep Gahlot

My Recent Posts
Sponsor

O LEVEL COMPUTER COURSE

Categories
Scroll to Top