Belphy!🌺's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Special code to make your desing float >w<

Hello, here I bring you a new tutorial that may be very useful to you, I hope you like it.


<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>


Paste this into your "About Me" section.

Warning: Some blinkies or gifs may move out of place, so keep that in mind before using this code. Any questions, don't hesitate to ask me ;b


2 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )