sábado, 24 de junio de 2017


Animacion Suave CSS TOOLTIP

Les comparto el siguiente codigo, este puede ser de gran utilidad.



Codigo:


<style type="text/css">
/* Start Fonts from Google Fonts */
/*Google Fonts*/
@import url('https://fonts.googleapis.com/css?family=Arapey|Cantarell|Comfortaa|Khand|Russo+One|Ubuntu');
/*End Fonts*/
/* Start Body */
body {
/* background: #EEE; */
background: url("https://s16.postimg.org/4d17gd0vp/smbg.png");
margin: 0;
padding: 0;
box-sizing: border-box;
color: #444;
font-family: 'Comfortaa', cursive;
text-align: center;
font: 16px;
}
/* End Body */
h1{
margin-bottom: 7%;
}
/*tooltip Box*/
.con-tooltip {
position: relative;
background: #F2D1C9;
border-radius: 9px;
padding: 0 20px;
margin: 10px;
display: inline-block;
transition: all 0.3s ease-in-out;
cursor: default;
}
/*tooltip */
.tooltip {
visibility: hidden;
z-index: 1;
opacity: .40;
width: 100%;
padding: 0px 20px;
background: #333;
color: #E086D3;
position: absolute;
top:-140%;
left: -25%;
border-radius: 9px;
font: 16px;
transform: translateY(9px);
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}
/* tooltip after*/
.tooltip::after {
content: " ";
width: 0;
height: 0;
border-style: solid;
border-width: 12px 12.5px 0 12.5px;
border-color: #333 transparent transparent transparent;
position: absolute;
left: 40%;
}
.con-tooltip:hover .tooltip{
visibility: visible;
transform: translateY(-10px);
opacity: 1;
transition: .3s linear;
animation: odsoky 1s ease-in-out infinite alternate;
}
@keyframes odsoky {
0%{
transform: translateY(6px);
}
100%{
transform: translateY(1px);
}
}
/*desplazamiento */
.left:hover {transform: translateX(-6px); }
.top:hover {transform: translateY(-6px); }
.bottom:hover {transform: translateY(6px);}
.right:hover {transform: translateX(6px); }
/*izquierda*/
.left .tooltip{ top:-20%; left:-170%; }
.left .tooltip::after{
top:40%;
left:90%;
transform: rotate(-90deg);
}
/*fondo*/
.bottom .tooltip { top:115%; left:-20%; }
.bottom .tooltip::after{
top:-17%;
left:40%;
transform: rotate(180deg);
}
/*derecha*/
.right .tooltip { top:-20%; left:115%; }
.right .tooltip::after{
top:40%;
left:-12%;
transform: rotate(90deg);
}
h3 {
background: #333;
color: #E086D3;
padding: 10px 20px;
border-radius: 56px;
width: 8em;
margin: 20% auto 1% auto;
}
</style>
<h1>Animacion Suave CSS TOOLTIP </h1>
<div class="con">
<!--izquierdo-->
<div class="con-tooltip left">
<p>izquierda</p>
<div class="tooltip">
<p>izquierda</p>
</div>
</div>
<!--Superior -->
<div class="con-tooltip top">
<p>superior</p>
<div class="tooltip">
<p>superior</p>
</div>
</div>
<!--fondo -->
<div class="con-tooltip bottom">
<p>fondo</p>
<div class="tooltip">
<p>fondo</p>
</div>
</div>
<!--derecha -->
<div class="con-tooltip rigth">
<p>derecha</p>
<div class="tooltip">
<p>derecha</p>
</div>
</div>
</div>


0 comentarios:

Publicar un comentario

Checa esto

¿Que temas debe de haber en la pagina?

Posts Populares

Popular Posts

Recent Posts