TODO HOVER: Efecto texto animado (1)

Texto animado 1


<style>.animated-txt {
  background: #414141;  /* fallback for old browsers */
  font: 400 1em/1.5 "Neuton"; 
  color: rgba(255,255,255,.25); text-align: center; 
  margin: 0 auto;
  min-height: 400px;
  }
.animated-txt p{
	text-transform: uppercase;
	letter-spacing: .5em;
	display: inline-block;
	border: 4px double rgba(255,255,255,.25);
	border-width: 4px 0;
	padding: 1.5em 0em;
	position: absolute;
	top: 20%;
	left: 50%;
	width: 40em;
	margin: 0 0 0 -20em;
}

@-webkit-keyframes aitf {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}
.animated-txt p span {
	font: 700 4em/1 "Oswald", sans-serif;
	letter-spacing: 0;
	padding: .25em 0 .325em;
	display: block;
	margin: 0 auto;
	text-shadow: 0 0 80px rgba(255,255,255,.5);
/* Clip Background Image */
	/*background: url(https://f.cl.ly/items/010q3E1u3p2Q0j1L1S1o/animated_text_fill.png) repeat-y;*/
  background-size: 50px 50px;
background-color: #c16;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
	-webkit-background-clip: text;
/* Animate Background Image */
	-webkit-text-fill-color: transparent;
	-webkit-animation: aitf 10s linear infinite;
/* Activate hardware acceleration for smoother animations */
	-webkit-transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
}

</style>
<div class="animated-txt">
<p><span>Texto animado</span></p>
</div>

Este efecto proviene de la siguiente URL: https://codeconvey.com/

T E X T O 2

   
   <style>.waveTextAnimated {
    margin-top: 0.6em;
    font-size: 50px;
    text-align: center;
}
.waveTextAnimated span {
  display: inline-block;
  -webkit-animation: wave-text 1s ease-in-out infinite;
          animation: wave-text 1s ease-in-out infinite;
}

.waveTextAnimated span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.waveTextAnimated span:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.waveTextAnimated span:nth-of-type(3) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.waveTextAnimated span:nth-of-type(4) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.waveTextAnimated span:nth-of-type(5) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
@-webkit-keyframes wave-text {
  00% {
    transform: translateY(0em);
  }
  60% {
    transform: translateY(-0.6em);
  }
  100% {
    transform: translateY(0em);
  }
}
@keyframes wave-text {
  00% {
    transform: translateY(0em);
  }
  60% {
    transform: translateY(-0.6em);
  }
  100% {
    transform: translateY(0em);
  }
}
</style>

<div class="waveTextAnimated">
  <span>T</span>
  <span>E</span>
  <span>X</span>
  <span>T</span>
  <span>O</span>
  <span>2</span>
</div>

Este efecto proviene de la siguiente URL: https://codeconvey.com/

sábado, 4 de junio de 2022

Efecto texto animado (1)