Красивые текстовые эффекты (2 варианта)

 Привет, друзья. Мудрить с текстовыми эффектами можно бесконечно. Вот и сегодня у меня ещё 2 интересных примера, как можно оформить участок текста или заголовки с помощью абсолютно простых кодов. 

Вариант 1. Вот такие появляющиеся и затухающие буквы в тексте.

Для просмотра, скопируйте код и установите в поле этого редактора

<div class="fading">исчезающие буковки</div>

<style>

  .fading {

    color: #B71C1C;

    font-size: 32px;

    line-height: 336px;    

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin: 30px 0;

}

.fading span {

    animation: fading 3s alternate infinite;

    opacity: 0;

}

@keyframes fading {

    0% {

        opacity: 0;

        filter: blur(10px);

    }

    50%, 100% {

        opacity: 1;

        filter: blur(0px);

    }

  }    </style>

<script>

  let fadingHeading = document.querySelectorAll('.fading');

for (let a = 0; a < fadingHeading.length; a++){

let letters = fadingHeading[a].textContent.split('');

let content = letters.map((val, i) => {

    let delay = Math.floor((Math.random() * 1000) + 1);

    return ('<span style="animation-delay: '+ delay + 'ms">'+ val +'</span>');

});

fadingHeading[a].innerHTML = "";

for (let i = 0; i < content.length; i++) {

    fadingHeading[a].innerHTML += content[i];

}

}</script>

Вариант  2. При наведении на текст получаем интересный ховер-эффект

Код

<div class="hover-letter">Hover-эффект букв</div>
<div class="hover-letter">для текста или заголовка</div>
<style>
.hover-letter {
    position: relative;
    text-align: center;
}
.hover-letter span {
    color: #DD2C00;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 42px;
    line-height: 1.2;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    text-shadow: 0 0 4px rgba(0,0,0, 0.2); 
    position: relative;
    text-transform: uppercase;
    top: 0px;
    left: 0px;
    cursor: default;
    z-index: 1; 
}
.hover-letter span:hover {
    text-shadow: -8px 8px 0 rgba(255, 0, 0, 0.2); 
    color:#311B92;
    top: -8px;
    left: 8px;
    z-index: 2; 
}
@media screen and (max-width: 767px) {
    .hover-letter span {
        font-size: 28px;
    }
}</style>
<script>
let hover = document.getElementsByClassName('hover-letter');
for (let i=0; i<hover.length; i++) {
    hover[i].innerHTML = hover[i].innerHTML.replace(/(.)/g, '<span>$1</span>');
}
</script>

В кодах легко настроить нужный цвет и размеры самого текста - color: и font-size: Любой из кодов устанавливаем в сообщении в формате HTML или в гаджет HTML/Javascript. 

Больше ни каких дополнений к вышеизложенному. Всем добра и до встречи. .