TODO HOVER: Animación de gradiente

Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Este efecto fue elaborado con el generador ofrecido en la siguiente URL: https://codeconvey.com/


<style>.animated-gradient {
  animation: animateBg 14s linear infinite;
  background-image: linear-gradient(90deg,#71c66c,#ff8000,#db5779,#71c66c,#ff8000);
  background-size: 400% 100%;
}
@keyframes animateBg {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}
</style>
<p class="animated-gradient">Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>

Modelo 2

Este efecto fue extraído de la siguiente URL: https://codeconvey.com/


<style>.gradient_bg {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	-webkit-animation: gradient 15s ease infinite;
	        animation: gradient 15s ease infinite;
	height: 50vh;font-size:30px;
}
.gradient_bg:hover{
   -webkit-animation: gradient 15s ease infinite;
   animation: gradient 15s ease infinite;
}
@-webkit-keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

</style>

<p class="gradient_bg">
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
</p>
<textarea>

</br>

<style>[class~=t-x]{font-size:em;font-family:"verdana",monospace;color:maroon;padding:10px;border: dotted maroon  2px;width:70%; 
height:70%;font-size:1em;margin:10;wrap:off;readonly:readonly;background:#F5F5C8;}</style>
</br></br>
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
</span>
<span class='post-timestamp'>
on
<meta content='https://todohover.blogspot.com/2022/06/animacion-de-gradiente.html' itemprop='url'/>
<a class='timestamp-link' href='https://todohover.blogspot.com/2022/06/animacion-de-gradiente.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2022-06-04T01:11:00-07:00'>junio 04, 2022</abbr></a>
</span>
<span class='post-comment-link'>
</span>
<span class='post-icons'>
</span>
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=8273775799023408860&postID=5436336285786706891&target=email' target='_blank' title='Enviar esto por correo electrónico'><span class='share-button-link-text'>Enviar esto por correo electrónico</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=8273775799023408860&postID=5436336285786706891&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=8273775799023408860&postID=5436336285786706891&target=twitter' target='_blank' title='Compartir en X'><span class='share-button-link-text'>Compartir en X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=8273775799023408860&postID=5436336285786706891&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Compartir en Facebook'><span class='share-button-link-text'>Compartir en Facebook</span></a><a class='goog-inline-block share-button sb-pinterest' href='https://www.blogger.com/share-post.g?blogID=8273775799023408860&postID=5436336285786706891&target=pinterest' target='_blank' title='Compartir en Pinterest'><span class='share-button-link-text'>Compartir en Pinterest</span></a>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
Etiquetas:
<a href='https://todohover.blogspot.com/search/label/gradiente' rel='tag'>gradiente</a>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
<center><img src='https://1.bp.blogspot.com/-Httqtjr0Fbo/WWkJS8hVQGI/AAAAAAAAUUA/KZmuXyJcsb4MpBq6k9OwV8_YgH5bYSuygCLcBGAs/s320/hr-darren-northcott-2.png' style='width:460px; height:37px;padding:0;'/></center>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
</div>
</div>
<div class='inline-ad'>
</div>

        </div></div>
      
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='https://todohover.blogspot.com/2022/06/efecto-texto-animado.html' id='Blog1_blog-pager-newer-link' title='Entrada más reciente'>Entrada más reciente</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='https://todohover.blogspot.com/2022/06/efecto-rotar-animacion-de-imagen-al.html' id='Blog1_blog-pager-older-link' title='Entrada antigua'>Entrada antigua</a>
</span>
<a class='home-link' href='https://todohover.blogspot.com/'>Página Principal</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
</div>
</div></div>
</div>
</div>
<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
</aside>
</div>
</div>
<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
<div class='sidebar section' id='sidebar-right-1'><div class='widget PageList' data-version='1' id='PageList1'>
<div class='widget-content'>
<ul>
<li>
<a href='https://todohover.blogspot.com/'>Página Principal</a>
</li>
</ul>
<div class='clear'></div>
</div>
</div><div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<h2>Archivo del Blog</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='flat'>
<li class='archivedate'>
<a href='https://todohover.blogspot.com/2022/11/'>noviembre 2022</a> (3)
      </li>
<li class='archivedate'>
<a href='https://todohover.blogspot.com/2022/10/'>octubre 2022</a> (4)
      </li>
<li class='archivedate'>
<a href='https://todohover.blogspot.com/2022/09/'>septiembre 2022</a> (3)
      </li>
<li class='archivedate'>
<a href='https://todohover.blogspot.com/2022/06/'>junio 2022</a> (99)
      </li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget Label' data-version='1' id='Label1'>
<h2>Etiquetas</h2>
<div class='widget-content list-label-widget-content'>
<ul>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/animacion'>animacion</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/Back%20Pulse'>Back Pulse</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/backward'>backward</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/Blocksera'>Blocksera</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bob'>bob</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/border-fade'>border-fade</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bounce-in'>bounce-in</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bounce-out'>bounce-out</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bounce-to-bottom'>bounce-to-bottom</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bounce-to-left'>bounce-to-left</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bounce-to-right'>bounce-to-right</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bounce-to-top'>bounce-to-top</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/box-shadow-inset'>box-shadow-inset</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/box-shadow-outset'>box-shadow-outset</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bubble-bottom'>bubble-bottom</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bubble-float-bottom'>bubble-float-bottom</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bubble-float-left'>bubble-float-left</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bubble-float-right'>bubble-float-right</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bubble-float-top'>bubble-float-top</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bubble-left'>bubble-left</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bubble-right'>bubble-right</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/bubble-top'>bubble-top</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/buzz'>buzz</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/buzz-out'>buzz-out</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/cssscript'>cssscript</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/curl-bottom-left'>curl-bottom-left</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/curl-bottom-right'>curl-bottom-right</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/curl-top-left'>curl-top-left</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/curl-top-right'>curl-top-right</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/demo'>demo</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/deslizante'>deslizante</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/desplazamiento%20de%20imagen'>desplazamiento de imagen</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/div'>div</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/efectos'>efectos</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/encoger'>encoger</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/Enlaces'>Enlaces</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/enu'>enu</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/estilo'>estilo</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/fade'>fade</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/flip%20card'>flip card</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/float'>float</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/float-shadow'>float-shadow</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/Forward'>Forward</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/glow'>glow</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/gradiente'>gradiente</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/Grow'>Grow</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/grow-rotate'>grow-rotate</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/grow-shadow'>grow-shadow</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/hang'>hang</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/hovering'>hovering</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/image%20shift'>image shift</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/imagehover'>imagehover</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/imagen'>imagen</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/indice'>indice</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/lista'>lista</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/m'>m</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/outline-in'>outline-in</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/outline-out'>outline-out</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/overline-from-center'>overline-from-center</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/overline-from-left'>overline-from-left</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/overline-from-right'>overline-from-right</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/overline-reveal'>overline-reveal</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/Pop'>Pop</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/pulse-grow'>pulse-grow</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/pulse-shrink'>pulse-shrink</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/pulso'>pulso</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/push'>push</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/radial-in'>radial-in</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/radial-out'>radial-out</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/Rectangle%20Out'>Rectangle Out</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/rectangle-in'>rectangle-in</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/resaltado'>resaltado</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/reveal'>reveal</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/ripple-in'>ripple-in</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/ripple-out'>ripple-out</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/Rotar%20animaci%C3%B3n'>Rotar animación</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/rotate'>rotate</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/round-corners'>round-corners</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/shadow'>shadow</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/shadow-radial'>shadow-radial</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/shrink'>shrink</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/shutter-in-vertical'>shutter-in-vertical</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/shutter-out-horizontal'>shutter-out-horizontal</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/shutter-out-vertical'>shutter-out-vertical</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/sink'>sink</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/skew'>skew</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/skew-backward'>skew-backward</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/skew-forward'>skew-forward</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/sombras'>sombras</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/subtitulos'>subtitulos</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/sweep-to-bottom'>sweep-to-bottom</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/sweep-to-left'>sweep-to-left</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/sweep-to-right'>sweep-to-right</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/sweep-to-top'>sweep-to-top</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/Temas'>Temas</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/texto'>texto</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/Transiciones%20de%20sombras'>Transiciones de sombras</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/trim'>trim</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/underline-from-center'>underline-from-center</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/underline-from-left'>underline-from-left</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/underline-from-right'>underline-from-right</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/underline-reveal'>underline-reveal</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/Wobble%20Horizontal'>Wobble Horizontal</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/Wobble%20Vertical%3B'>Wobble Vertical;</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/wobble-bottom'>wobble-bottom</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/wobble-skew'>wobble-skew</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/wobble-to-bottom-right'>wobble-to-bottom-right</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/wobble-to-top-right'>wobble-to-top-right</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/wobble-top'>wobble-top</a>
</li>
<li>
<a dir='ltr' href='https://todohover.blogspot.com/search/label/zoom'>zoom</a>
</li>
</ul>
<div class='clear'></div>
</div>
</div><div class='widget ReportAbuse' data-version='1' id='ReportAbuse1'>
<h3 class='title'>
<a class='report_abuse' href='https://www.blogger.com/go/report-abuse' rel='noopener nofollow' target='_blank'>
Denunciar abuso
</a>
</h3>
</div><div class='widget BlogSearch' data-version='1' id='BlogSearch1'>
<h2 class='title'>Buscar este blog</h2>
<div class='widget-content'>
<div id='BlogSearch1_form'>
<form action='https://todohover.blogspot.com/search' class='gsc-search-box' target='_top'>
<table cellpadding='0' cellspacing='0' class='gsc-search-box'>
<tbody>
<tr>
<td class='gsc-input'>
<input autocomplete='off' class='gsc-input' name='q' size='10' title='search' type='text' value=''/>
</td>
<td class='gsc-search-button'>
<input class='gsc-search-button' title='search' type='submit' value='Buscar'/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div class='clear'></div>
</div>
</div>
</aside>
</div>
</div>
</div>
<div style='clear: both'></div>
<!-- columns -->
</div>
<!-- main -->
</div>
</div>
<div class='main-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'></div>
<div class='region-inner footer-inner'>
<div class='foot section' id='footer-1'><div class='widget HTML' data-version='1' id='HTML1'>
<div class='widget-content'>
<div id="navigation_up_down_79136" style="position: absolute; right: 30px; bottom: 50px; z-index:999999">
<script type="text/javascript" src="http://services.webestools.com/navigation_up_down/1-79136-right.js"></script></div>
</div>
<div class='clear'></div>
</div></div>
<!-- outside of the include in order to lock Attribution widget -->
<div class='foot section' id='footer-3' name='Pie de página'><div class='widget Attribution' data-version='1' id='Attribution1'>
<div class='widget-content' style='text-align: center;'>
Imágenes del tema de <a href='https://www.istockphoto.com/googleimages.php?id=11394138&platform=blogger&langregion=es_419' target='_blank'>luoman</a>. Con tecnología de <a href='https://www.blogger.com' target='_blank'>Blogger</a>.
</div>
<div class='clear'></div>
</div></div>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</footer>
<!-- content -->
</div>
</div>
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</div>
<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace('loading', '');
      }, 10);
  </script>

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2028843038-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7PP8GlGrMo5Tpo9dWyi4nllZW1ew:1770393160790';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8273775799023408860','//todohover.blogspot.com/2022/06/animacion-de-gradiente.html','8273775799023408860');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '8273775799023408860', 'title': 'TODO HOVER', 'url': 'https://todohover.blogspot.com/2022/06/animacion-de-gradiente.html', 'canonicalUrl': 'https://todohover.blogspot.com/2022/06/animacion-de-gradiente.html', 'homepageUrl': 'https://todohover.blogspot.com/', 'searchUrl': 'https://todohover.blogspot.com/search', 'canonicalHomepageUrl': 'https://todohover.blogspot.com/', 'blogspotFaviconUrl': 'https://todohover.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'es-419', 'localeUnderscoreDelimited': 'es_419', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22TODO HOVER - Atom\x22 href\x3d\x22https://todohover.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22TODO HOVER - RSS\x22 href\x3d\x22https://todohover.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22TODO HOVER - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/8273775799023408860/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22TODO HOVER - Atom\x22 href\x3d\x22https://todohover.blogspot.com/feeds/5436336285786706891/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'isGoogleEverywhereLinkTooltipEnabled': true, 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/dec693955754c531', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Obtener v\xednculo', 'key': 'link', 'shareMessage': 'Obtener v\xednculo', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Compartir en Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Compartir en X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Compartir en Pinterest', 'target': 'pinterest'}, {'name': 'Correo electr\xf3nico', 'key': 'email', 'shareMessage': 'Correo electr\xf3nico', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27es_419\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Seguir leyendo \xbb', 'pageType': 'item', 'postId': '5436336285786706891', 'pageName': 'Animaci\xf3n de gradiente', 'pageTitle': 'TODO HOVER: Animaci\xf3n de gradiente'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Editar', 'linkCopiedToClipboard': 'V\xednculo copiado al portapapeles', 'ok': 'Aceptar', 'postLink': 'Publicar v\xednculo'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Personalizado', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Animaci\xf3n de gradiente', 'description': ' Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dui...', 'url': 'https://todohover.blogspot.com/2022/06/animacion-de-gradiente.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 5436336285786706891}}]);
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3926937703-lbx__es_419.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'sidebar-right-1', document.getElementById('PageList1'), {'title': '', 'links': [{'isCurrentPage': false, 'href': 'https://todohover.blogspot.com/', 'title': 'P\xe1gina Principal'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar-right-1', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Cargando\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidebar-right-1', document.getElementById('Label1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ReportAbuseView', new _WidgetInfo('ReportAbuse1', 'sidebar-right-1', document.getElementById('ReportAbuse1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch1', 'sidebar-right-1', document.getElementById('BlogSearch1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'footer-1', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'footer-3', document.getElementById('Attribution1'), {}, 'displayModeFull'));
</script>
</body>
</html>

sábado, 4 de junio de 2022

Animación de gradiente