Animacion Suave CSS TOOLTIP - Educa Sistemas

Breaking

Post Top Ad

Post Top Ad

sábado, 24 de junio de 2017

Animacion Suave CSS TOOLTIP


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>

No hay comentarios:

Publicar un comentario

Post Top Ad

Responsive Ads Here