Forum:
There's an mcr layout that makes the profile go up and down, and also when you hover some things it shakes. Anyone know how to do these things? D;
I'm too smooth-brained to be able to isolate and figure how to do it n put it on my profile;-;
« Web, HTML, Tech Forum
How I make my profile do the up and down animation?
Report Topic
11 Replies
Reply by sutvre
posted
this part makes it bob up and down:
<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;}
}
.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>
while this part makes the stuff shake when you hover over it:
<style>
img:hover , .url-info:hover , .online:hover {
animation: shake 1s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>
sorry if I left anything out lmao, I'm also super confused since I only started looking into css today
Reply by Tabris☤
Tabris☤
posted
Reply by Xx_syd_xX
posted
Reply by MARTIAN⁉️
posted
Reply by cooked
posted
Reply by SourceCodeSerenader
posted
Reply by Mafu (°ロ°) !!
posted
Reply by ♱shewillrot♱
posted
Tysssmmmm!
but theres something wrong with my page when i did that my gifs were all missed placed so how do i fix that lol
Reply by ♱shewillrot♱
posted
Tysssmmmm!
but theres something wrong with my page when i did that my gifs were all missed placed so how do i fix that lol
Reply by ⟡Ziggy
posted
Reply by Ruwsiann
posted
And so that my loading screen and the VHS filter are not clipped when moving down and up? Do you have a solution?