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 .

howto steemit webdesign blog new
7 years ago by

Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

  • Disagreement on rewards
  • Fraud or plagiarism
  • Hate speech or trolling
  • Miscategorized content or spam

Submit
$0.57
  • Past Payouts $0.57
  • - Author $0.44
  • - Curators $0.13
13 votes
15
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
  • 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!

    Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

    • Disagreement on rewards
    • Fraud or plagiarism
    • Hate speech or trolling
    • Miscategorized content or spam

    Submit
    $0.00
      2 votes
      [-]
        ·  7 years ago 

      The @OriginalWorks bot has determined this post by @minhazuddinnahid to be original material and upvoted(1.5%) it!

      ezgif.com-resize.gif

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

      Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

      • Disagreement on rewards
      • Fraud or plagiarism
      • Hate speech or trolling
      • Miscategorized content or spam

      Submit
      $0.00
        1 vote
        [-]
          ·  7 years ago 

        thanks a lot

        Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

        • Disagreement on rewards
        • Fraud or plagiarism
        • Hate speech or trolling
        • Miscategorized content or spam

        Submit
        $0.00
          [-]
            ·  7 years ago 

          nice content

          Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

          • Disagreement on rewards
          • Fraud or plagiarism
          • Hate speech or trolling
          • Miscategorized content or spam

          Submit
          $0.00
            1 vote
            [-]
              ·  7 years ago 

            Thanks You

            Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

            • Disagreement on rewards
            • Fraud or plagiarism
            • Hate speech or trolling
            • Miscategorized content or spam

            Submit
            $0.00
              [-]
                ·  7 years ago 

              nice

              Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

              • Disagreement on rewards
              • Fraud or plagiarism
              • Hate speech or trolling
              • Miscategorized content or spam

              Submit
              $0.00
                1 vote
                [-]
                  ·  7 years ago 

                great post

                Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

                • Disagreement on rewards
                • Fraud or plagiarism
                • Hate speech or trolling
                • Miscategorized content or spam

                Submit
                $0.00
                  1 vote
                  [-]
                    ·  7 years ago 

                  Thanks You

                  Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

                  • Disagreement on rewards
                  • Fraud or plagiarism
                  • Hate speech or trolling
                  • Miscategorized content or spam

                  Submit
                  $0.00
                    [-]
                      ·  7 years ago 

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

                    Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

                    • Disagreement on rewards
                    • Fraud or plagiarism
                    • Hate speech or trolling
                    • Miscategorized content or spam

                    Submit
                    $0.00
                      1 vote
                      [-]
                        ·  7 years ago 

                      great

                      Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

                      • Disagreement on rewards
                      • Fraud or plagiarism
                      • Hate speech or trolling
                      • Miscategorized content or spam

                      Submit
                      $0.00
                        1 vote
                        [-]
                          ·  7 years ago 

                        wow!!!

                        Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

                        • Disagreement on rewards
                        • Fraud or plagiarism
                        • Hate speech or trolling
                        • Miscategorized content or spam

                        Submit
                        $0.00
                          1 vote
                          [-]
                            ·  7 years ago 

                          Thanks You

                          Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

                          • Disagreement on rewards
                          • Fraud or plagiarism
                          • Hate speech or trolling
                          • Miscategorized content or spam

                          Submit
                          $0.00
                            [-]
                              ·  7 years ago 

                            nice post

                            Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

                            • Disagreement on rewards
                            • Fraud or plagiarism
                            • Hate speech or trolling
                            • Miscategorized content or spam

                            Submit
                            $0.00
                              [-]
                                ·  7 years ago 

                              Nice work

                              Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

                              • Disagreement on rewards
                              • Fraud or plagiarism
                              • Hate speech or trolling
                              • Miscategorized content or spam

                              Submit
                              $0.00
                                [-]
                                  ·  7 years ago 

                                i'll try it

                                Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

                                • Disagreement on rewards
                                • Fraud or plagiarism
                                • Hate speech or trolling
                                • Miscategorized content or spam

                                Submit
                                $0.00