Franciss:3's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Silly raining alien cat GIF

<!-- (c) Layout created by 🍃Sai (https://layouts.spacehey.com/layout?id=107378) --> 


<div class="falling-gif">
  <div class="falling-gif"><img src"https://giphy.com/gifs/meme-mr-fluffy-and-felicity-alien-DMjwQoR5VGS7JCGLhM /></div>

  <div class="falling-gif"><img src="https://giphy.com/gifs/meme-mr-fluffy-and-felicity-alien-DMjwQoR5VGS7JCGLhM" /></div>

  <div class="falling-gif"><img src="https://giphy.com/gifs/meme-mr-fluffy-and-felicity-alien-DMjwQoR5VGS7JCGLhM" /></div>

  <div class="falling-gif"><img src="https://giphy.com/gifs/meme-mr-fluffy-and-felicity-alien-DMjwQoR5VGS7JCGLhM" /></div>

  <div class="falling-gif"><img src="https://giphy.com/gifs/meme-mr-fluffy-and-felicity-alien-DMjwQoR5VGS7JCGLhM" /></div>

  <div class="falling-gif"><img src="https://giphy.com/gifs/meme-mr-fluffy-and-felicity-alien-DMjwQoR5VGS7JCGLhM" /></div>

  <div class="falling-gif"><img src="https://giphy.com/gifs/meme-mr-fluffy-and-felicity-alien-DMjwQoR5VGS7JCGLhM" /></div>

  <div class="falling-gif"><img src="https://giphy.com/gifs/meme-mr-fluffy-and-felicity-alien-DMjwQoR5VGS7JCGLhM" /></div>

</div>

<style>
  @-webkit-keyframes falling-gif-fall {
    0% {
      top: -10%;
    }
    100% {
      top: 100%;
    }
  }
  @keyframes falling-gif-fall {
    0% {
      top: -10%;
    }
    100% {
      top: 100%;
    }
  }
  .falling-gif {
    position: fixed;
    top: -10%;
    z-index: 9999;  /* Change the value to -1 to add the animation to the background */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: falling-gif-fall;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-name: falling-gif-fall;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }


/* Specifics to make a more natural fall effect. Feel free to change */
  .falling-gif:nth-of-type(0) {
    left: 1%;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }
  .falling-gif:nth-of-type(1) {
    left: 10%;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  .falling-gif:nth-of-type(2) {
    left: 20%;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }
  .falling-gif:nth-of-type(3) {
    left: 30%;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }
  .falling-gif:nth-of-type(4) {
    left: 40%;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
  }
  .falling-gif:nth-of-type(5) {
    left: 50%;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
  }
  .falling-gif:nth-of-type(6) {
    left: 60%;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  .falling-gif:nth-of-type(7) {
    left: 70%;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }
</style>



4 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )