TODO HOVER: Texto

sábado, 4 de junio de 2022
Texto

Hover me

    https://www.cssscript.com/demo/custom-tooltips-cool-animations/simple-tooltips.css
    
 <link href='https://www.cssscript.com/demo/custom-tooltips-cool-animations/simple-tooltips.css' rel='stylesheet' type='text/css'/>

 <style>
   .hover-me{
        background-color: #2ad2c9;
        width: 60px;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 1rem;border-left:2px solid red;
        cursor: default;
        border-radius: 50%;
        transition: 0.2s;box-shadow: 3px 1px 11px green;
    }
    .hover-me:hover{
           background: linear-gradient(-45deg, #f9c261, #e73c7e, purple, #f9c261);
	background-size: 400% 400%;border-left:3px solid red;
	-webkit-animation: gradient 15s ease infinite;
	        animation: gradient 15s ease infinite;
	 height: 40vh;width: 40vh;font-size:20px;box-shadow: 3px 1px 11px green;
}
 footer{
        position: fixed;
        color: hsl(0, 0%, 30%);
        font-size: 16px;
        top: 95%;
    }

</style>

   <div class="hover-me stt-fade-right" data-stt-title="Fade right">Hover me</div>  </br></br>
   <div class="hover-me stt-fold-left" data-stt-title="Fold left">Hover me</div>  </br></br>
        <div class="hover-me stt-zoom-up" data-stt-title="Zoom up">Hover me</div>  </br></br>
        <div class="hover-me stt-flip-down" data-stt-title="Flip down">Hover me</div>  </br></br>
Este efecto fue extraído de la siguiente URL: https://www.cssscript.com/