Comments

17 minutes ago (edited) Report 👍

Try either HTML one or CSS one but not both.

CSS:   .falling-container {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%; 

  overflow: hidden;

  z-index: 99; /* Keeps items on top of profile content. Lower this if it blocks menus. */

  pointer-events: none; /* Allows users to click through the items */

}

.falling-item {

  position: absolute;

  top: -50px; 

  width: 32px;  /* Set to the width of your image */

  height: 32px; /* Set to the height of your image */

  /* PLACE YOUR IMAGE LINK HERE */

  background-image: url("YOUR_IMAGE_URL_HERE"); 

  background-size: contain;

  background-repeat: no-repeat;

  user-select: none;

  animation: fall linear infinite;

}

/* Horizontal positioning and speed variations */

.item1 { left: 15%; animation-duration: 6s; animation-delay: 0s; }

.item2 { left: 35%; animation-duration: 9s; animation-delay: 1.5s; }

.item3 { left: 55%; animation-duration: 7s; animation-delay: 4s; }

.item4 { left: 75%; animation-duration: 10s; animation-delay: 0.8s; }

.item5 { left: 90%; animation-duration: 8s; animation-delay: 2.5s; }

@keyframes fall {

  0% {

    top: -50px;

    transform: translateX(0) rotate(0deg);

    opacity: 1;

  }

  50% {

    transform: translateX(15px) rotate(180deg);

  }

  100% {

    top: 105%; 

    transform: translateX(-15px) rotate(360deg);

    opacity: 0.4;

  }

}

HTML: