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 179 comments ( View all | Add Comment )

Iris	1733187513 using Report Comment
Maddie ™	1733010450 using ty ty Report Comment
nameless_jest	1732976337 uSing Report Comment
C4LLM3MIN4	1732377075 using X] Report Comment
woodrufdetective	1732310950 Using! :D Report Comment
Luna	1732134278 using :> Report Comment
thr45h_	1731537146 Using :0 Report Comment
Астронавтбезколы	1731515475 using<3 Report Comment
M00YT00NS	1731412295 Using!! Report Comment
Mello	1731369937 using Report Comment
rawrsalia	1731361931 usingg Report Comment
yor!!_fav4ev	1731352147 using Report Comment
yor!!_fav4ev	1731352147 using Report Comment
Rinlin.co	1731282555 Using!! Report Comment
𝒥𝒞 　݁𐚁ㅤ۪　﹐🍯　　݂ೇ　𐔌𐐩KATTY/KAT?ׅ　 ݁ ⠀ ⠀✱⌣⌣　𔓐𑇓　ׅ ﹗	1731246795 Using!! >0< (btw i credit you in my profile!!) Report Comment
𝒥𝒞 　݁𐚁ㅤ۪　﹐🍯　　݂ೇ　𐔌𐐩KATTY/KAT?ׅ　 ݁ ⠀ ⠀✱⌣⌣　𔓐𑇓　ׅ ﹗	1731246795 Using!! >0< (btw i credit you in my profile!!) Report Comment
soph!	1730919680 USING!! THANK YOU SO MUCH IBE BEEN LOOKING FOR THIS FOR LKE VOREVER Report Comment
conan .ᐟ.ᐟ	1730913420 using the floating animation :)))) btw ur layout is so cool bro!!! Report Comment
✭𝔃𝓲𝓰𝓰𝔂 ✭	1730182695 using! <3 Report Comment tyy !! by 𝔯𝔢𝔯𝔦𝔢 ☆; 1730268445; Report
decadencia 83	1729346188 Using Report Comment