HAVE U SEEN THOSE KEWL AND SICK LOOKING PROFILES THAT FLOAT? AND U HAVE WONDERED, "HUH.. HOW DO I MAKE MINE LIKE THAT??? I WANT MINE TO BE SOMTH LIKE THAT! :D"
WELL! HERES UR ANSWER >:3!!
FIRST UP!
WE WILL DO THE FOLLOWING FIRST PART OF THE CODE! LIKE ANY CODE, WE WILL NEED THE:
<style>
THIS STARTS UP THE CODE, AND SO IT CAN WORK.
NOW, LETS GET TO SRS BUSINESS (NOT SO SRS LOLZERS!)
WE WILL TYPE:
.col, main, footer, nav .links, nav .top, html::before {
WUT DOES THIS EVEN DO? IT ALSO MAKES THE CODE HAVE A BEGINING, ITS LIKE WRITTING A PARAGRAPH THE <style> IS THE INDENT AND THIS PART OF THE CODE MAKES IT SO THE CODE KNOWS WHAT PARTS WILL LOOK LIKE FLOATING!
THIS PART IS NEXT, THE MOST IMPORTANT ONE!
animation: float 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
ALR SOO!!! U WILL TYPE THIS NEXT, THIS PART LETS U DO THE ANIMATION AND FOR HOW LONG WILL IT FLOAT, U SEE DAT PART THAT SAYS "animation: float 3;" RIGHT? U CAN CHANGE AND EXPERIEMNT WITH THE SECONDS NUMBER, THIS WIL OBVI MAKE IT FLOAT FASTER OR SLOWER DEPPENDING ON THE NUMBER U TYPE THERE!!! :P
FOR LAST (NOT REALLY '.3.)
WE HAVE THIS!
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}
}
THIS ALSO ALLOWS THE CODE TO WORK, WITHOUT THIS, UR PROFILE WONT FLOAT!
NOW FOR LAST! NOW BEING FRRRSS
REMEMBER THE <style>? WELL, WE WILL CLOSE UP THE CODE WITH SMTH QUITE.. SIMILAR!
</style>
THIS COMMAND WILL CLOSE IT ALL UP!
IF U DONT REALLY UNDERSTAN THIS HERE'S THE COMPLETE CODE TO MAKE UR LIFE WAAAY EASIER:V
<style>
.col, main, footer, nav .links, nav .top, html::before {
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>
(IF SMTH DOESNT WORK OR ITS UNCLEAR PLS COMMENT! ALSO IF THIS HELPED, IM GLAD ^U^
THIS ISNT THE BEST TUT DUE TO THE FACT WELL-
IM A SELF TAUGHT CODER, AND IM KIND OF GETTING THE HANG OF THIS!)
Comments
Displaying 0 of 0 comments ( View all | Add Comment )