Rain Animation by HTML & CSS

in #howto • 7 years ago (edited)


Today we are going to see ,How to make a Rain animation in Webpage . We use only HTML & CSS to make this webdesign. Hope it will be helpful for you .

HTML CODE:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rain Animation</title>
<link href="rain.css" rel="stylesheet" type="text/css">
</head>

<body> 
	<div class="rain"></div>
</body>
</html>


CSS CODE:

@charset "utf-8";
/* CSS Document */
body
{
	margin:0;
	padding: 0;
	background: url(727283.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}
.rain
{
	height: 100vh;
	background: url(rain.png);
	animation: rain .2s linear infinite;
}
.rain:before
{
    content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	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;
	}
	
}

Try Yourself . Hope It's give you satisfaction .

#steemit #webdesign #blog #new
7 years ago in #howto by
$0.57
  • Past Payouts $0.57
  • - Author $0.44
  • - Curators $0.13
13 votes
Reply 15
Sort:  
  • Trending
    • [-]
     7 years ago  

    Calling @originalworks :)
    img credz: pixabay.com
    Nice, you got a 28.0% @steemdrive upgoat, thanks to @minhazuddinnahid
    Want a boost? Minnowbooster's got your back!

    [-]
     7 years ago  


    ezgif.com-resize.gif
    The @OriginalWorks bot has determined this post by @minhazuddinnahid to be original material and upvoted(1.5%) it!

    To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!

    [-]
     7 years ago  

    nice post. now i will be a web designer :-)

    [-]
     7 years ago  

    i'll try it

    $0.00
      Reply