Revelando Texto com Css

Revelando Texto com Css

Neste tutorial vamos fazer o Texto revelado usando pseudo elementos com css

Vamos Adicionar o Html:

<h1 class="title">
                
   <span><b>Loop Nerd</b></span>
   <span>Códigos Css Prontos.</span>
                
</h1>

Vamos Adicionar o Css:

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root{ --branco: #ffffff; }

.title { 

    width:260px;
    margin:auto;
    text-align:center;
    font-family:'open_sansregular'; 
    color:#737373!important;  
    font-size:1.3em;


}

/* title*/
.title span{

    line-height: 1.3;
    position: relative;
    overflow: hidden;
    display: block;

}

.title span b { font-family:'open_sansregular'; }

.title span::after{

    width: 100%;
    height: 100%;
    background: #33dbdf;
    top: 0;
    right: 0;
    content: '';
    position: absolute;
    animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(-101%);
}

.title span::before{

    width: 100%;
    height: 100%;
    content: '';
    top: 0;
    right: 0;
    position: absolute;
    background: var(--branco);
    animation: a-ltr-before 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);
}

.title span:nth-of-type(1)::before,
.title span:nth-of-type(1)::after{
    animation-delay: 1s;
}

.title span:nth-of-type(2)::before,
.title span:nth-of-type(2)::after{
    animation-delay: 1.5s;
}

@keyframes a-ltr-after{
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}
}

@keyframes a-ltr-before{
    0% {transform: translateX(0)}
    100% {transform: translateX(200%)}
}

Veja o Resultado!

Baixar Código Veja Funcionando