Layout floating animation

Tags: animation, profile animation, floating, filter, layouts, cute

Description:

This animation has a floating effect. Literally that's all. It also has a tv filter on it, but you can mess around with the code to remove it if you don't like the filter! (Some layouts manually remove the filter on the animation though, just a quick disclaimer)
If you use it please comment! ty!
Also if you wanna see how the animation looks, just click on this layout, it'll always be here. This animation works on most layouts!!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by reanna ☆ (https://layouts.spacehey.com/layout?id=33426) -->

<style>

h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: courier;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}

</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 272 comments ( View all | Add Comment )

MAYU	1765902125 using!♪ Report Comment
Savior's Abandonment	1765593129 using Report Comment
Ziaek	1765029970 using Report Comment
Esmerei	1765016026 using... heh Report Comment
Junie	1764771690 Using! perfect for the water theme Report Comment
𝓕𝓻𝓮𝓪𝓴𝔂 J☆zz__!!™	1764467360 using Report Comment
marsh.	1764410503 using Report Comment
Bibi	1763644156 usinggggggg Report Comment
dumbchan ( ´ཀ` )	1762545381 using!! Report Comment
Germinator	1762315431 using!! (✿◠‿◠) Report Comment
⋆༺𓆩︎︎𓆪⋆·:☆𝚃𝚛𝚎𝚗𝚝.⛧⃝⋆.°★♱¨:·	1760909375 using Report Comment
souplume	1760265526 Using Report Comment
RoseRiffVee ‧₊⟡‎ 击	1760096792 which part/s do i delete to remove the tv filter? Report Comment this one body::before { content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%); z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none; } by mer; 1760484370; Report
mars	1759132865 using :p Report Comment ty! by reanna ☆; 1759138300; Report
ASSG0R3 RU/UKR/ENG	1758376902 Using Report Comment
PB&J	1757863970 using!! Report Comment
ItzAbi	1757862241 usingggg :3 Report Comment
This account is not active anymore	1757676335 USING Report Comment
CrvvshPigeon	1757675758 using :p Report Comment
𝕭𝖚𝖓𝖓𝖞𝕭𝖔𝖔	1757010145 using ty Report Comment