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
16 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
Permalink
Reply by Tabris☤
Tabris☤
posted
Reply by Insydious
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?
Reply by 丰 punkyylilcat
posted
Reply by Sam
posted
Reply by Suparabbit (NYAPPY NYAPPY NYAPPY) o(≧∀≦)o☆⋆｡𖦹°‧★
posted
updated
Reply by mari
posted
i tried to use this, but it then moved my floating images to the middle? help?
Reply by sears
posted
updated
(edited, the gifs go in the containers but i think the gifs/images that fall down on ur screen won't fall on one side now)
<style>
main, footer, nav::before, .online, nav .links, nav .top {
animation: float 3s;
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>