Add a Flock of Birds Flying Around Your Profile 🐦

1 week ago - by Kayla⟡ - Backgrounds & Overlays - used 15 times

This creates a bunch of little bird silhouettes at different heights, sizes, and speeds (must use HTML code + css code)

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save. Leave the Visual Builder's existing CSS in place - add this under it, don't replace it.

<style>
/* FLYING BIRDS */

.bird-sky {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.css-bird {
  position: absolute !important;
  left: -70px;
  top: var(--top);

  width: 25px;
  height: 8px;

  background: #554f59;
  border-radius: 70% 55% 55% 70%;

  opacity: .55;

  transform: scale(var(--size));

  animation:
    bird-fly var(--speed) linear var(--delay) infinite;
}

/* tail */
.css-bird::before {
  content: "";
  position: absolute;

  left: -6px;
  top: 1px;

  width: 10px;
  height: 7px;

  background: #554f59;

  clip-path: polygon(
    100% 50%,
    0 0,
    25% 50%,
    0 100%
  );
}

/* beak */
.css-bird::after {
  content: "";
  position: absolute;

  right: -6px;
  top: 2px;

  width: 7px;
  height: 5px;

  background: #554f59;

  clip-path: polygon(
    0 0,
    100% 50%,
    0 100%
  );
}

/* wing */
.css-bird i {
  position: absolute;

  left: 8px;
  top: -5px;

  width: 15px;
  height: 10px;

  background: #554f59;

  border-radius: 100% 10% 100% 20%;

  transform-origin: left bottom;

  animation: bird-wing .55s ease-in-out infinite alternate;
}

/* birds cross the screen */
@keyframes bird-fly {
  0% {
    left: -70px;
  }

  100% {
    left: calc(100vw + 70px);
  }
}

/* wings flap */
@keyframes bird-wing {
  from {
    transform: rotate(-25deg);
  }

  to {
    transform: rotate(30deg);
  }
}
</style>

HTML Code

This element also has an HTML part - paste it into your About Me (or wherever the description says).

<div class="bird-sky">
  <span class="css-bird" style="--top:8%; --size:.55; --speed:24s; --delay:-4s;"><i></i></span>
  <span class="css-bird" style="--top:14%; --size:.8; --speed:31s; --delay:-18s;"><i></i></span>
  <span class="css-bird" style="--top:21%; --size:.45; --speed:27s; --delay:-9s;"><i></i></span>
  <span class="css-bird" style="--top:29%; --size:1; --speed:35s; --delay:-25s;"><i></i></span>
  <span class="css-bird" style="--top:37%; --size:.65; --speed:22s; --delay:-14s;"><i></i></span>
  <span class="css-bird" style="--top:46%; --size:.4; --speed:30s; --delay:-6s;"><i></i></span>
  <span class="css-bird" style="--top:54%; --size:.75; --speed:38s; --delay:-29s;"><i></i></span>
  <span class="css-bird" style="--top:63%; --size:.5; --speed:26s; --delay:-20s;"><i></i></span>
  <span class="css-bird" style="--top:71%; --size:.9; --speed:33s; --delay:-11s;"><i></i></span>
  <span class="css-bird" style="--top:80%; --size:.45; --speed:29s; --delay:-23s;"><i></i></span>
  <span class="css-bird" style="--top:88%; --size:.7; --speed:36s; --delay:-16s;"><i></i></span>
  <span class="css-bird" style="--top:94%; --size:.35; --speed:25s; --delay:-2s;"><i></i></span>
</div>

How to use: copy the CSS above → open your layout editor → switch to the Advanced CSS tab → paste at the bottom (keep the Visual Builder CSS above it) → save → refresh your profile. If the element also has HTML, paste that into About Me or at the bottom of Advanced CSS after the CSS. Elements stack - you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Backgrounds & Overlays

« Back to Backgrounds & Overlays | « All Profile Elements