How to get a floating/raining clippy for your profile!

(Or any other image)

Add < infront of each code you copy.

Heres the clippy i used Png link

Image locked in position:

img src="YOUR_IMAGE_URL"

     style="position:fixed; top:20px; right:20px; width:150px; z-index:9999;"

     alt="Floating Image">

Move around in a square path:

style>

@keyframes floatAround {

  0%   { top: 10px; left: 10px; }

  25%  { top: 10px; right: 10px; left: auto; }

  50%  { bottom: 10px; right: 10px; top: auto; }

  75%  { bottom: 10px; left: 10px; right: auto; }

  100% { top: 10px; left: 10px; bottom: auto; }

}

.floating-img {

  position: fixed;

  width: 150px;

  animation: floatAround 12s linear infinite;

  z-index: 9999;

}

</style>

<img src="YOUR_IMAGE_URL" class="floating-img" alt="Floating Image">

Smooth drifting as on my profile:

style>

@keyframes drift {

  0%   { top: 10%; left: 10%; }

  25%  { top: 5%;  left: 70%; }

  50%  { top: 70%; left: 60%; }

  75%  { top: 80%; left: 20%; }

  100% { top: 10%; left: 10%; }

}

.floating-img {

  position: fixed;

  width: 150px;

  animation: drift 18s ease-in-out infinite;

  z-index: 9999;

}

</style>

<img src="YOUR_IMAGE_URL" class="floating-img" alt="Floating Image">

Image rain

style>

@keyframes rainDrop {

  0%   { transform: translateY(-150px); opacity: 1; }

  90%  { opacity: 1; }

  100% { transform: translateY(110vh); opacity: 0; }

}

.rain {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  overflow: hidden;

  z-index: 9999;

}

.rain img {

  position: absolute;

  width: 50px; /* size of raindrop image */

  animation: rainDrop 4s linear infinite;

}

</style>

<div class="rain">

  <img src="YOUR_IMAGE_URL" style="left: 10%;">

  <img src="YOUR_IMAGE_URL" style="left: 30%; animation-delay: 1s;">

  <img src="YOUR_IMAGE_URL" style="left: 50%; animation-delay: 2s;">

  <img src="YOUR_IMAGE_URL" style="left: 70%; animation-delay: 1.5s;">

  <img src="YOUR_IMAGE_URL" style="left: 90%; animation-delay: 0.5s;">

</div>