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.
If you use it please comment! ty!
Also if you wanna see how the animation looks, just go on my profile, it'll always be there. This animation works on most layouts!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 𝔯𝔢𝔯𝔦𝔢 ☆ (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 114 comments ( View all | Add Comment )

Kai !!	1715281319 Usingg!! Report Comment
JRxoxo	1715014475 using !!! tyty Report Comment
kava !Messured	1714966498 Using. Report Comment
Ellie !!	1714942311 Using !! >o< Report Comment
Aida superstar	1714810385 using!! Report Comment
Odorisyellowboxinggloves	1714474947 Ysing Report Comment
darkzzz	1713876960 usinggg!! ^^ Report Comment
MSpaintBunnie	1713045104 USING :D Report Comment
kyle ★;	1712834939 where do i paste my url?? Report Comment
adam / liam ⚓️ [ sys ] ..	1712460805 USING !!! Report Comment
LILITHHH!	1712025808 USEING Report Comment
char☆	1711998503 OMG BRO TYSM I SPENT HOURS TRYING TO CODE ONE OF THESE THINGS MYSELF AND COULDNT FIGURE IT OUT- TYSSMMMMSMMSMS <33 Report Comment
fludd/panda	1711956240 using! Report Comment
Ein !!	1711764386 using Report Comment
marcie.da.vxmpire	1711231578 Using! Report Comment
Aces ^^	1710920280 using!! ^A^ Report Comment
esque	1710857538 using ! ^o^ Report Comment
churrion	1710786188 using! Report Comment
Zello	1709880152 Using!! Report Comment
honeyoleander	1709671378 using !! Report Comment