Красивые текстовые эффекты (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. При наведении на текст получаем интересный ховер-эффект

ховер-эффект текста на jQuery


Код

<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. 

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

7 комментариев:

  1. Такое ощущение что на этом сервере просто неисчерпаемые возможности для разных забавных фишек!

    ОтветитьУдалить
  2. Семён, Вы правы. Шаблон Блоггер очень "гибкий"-а вариантов всяких очень много-выбирай, не хочу.

    ОтветитьУдалить
  3. Классно! Спасибо. Исчезающие взяла с удовольствием!

    ОтветитьУдалить
  4. вот тут вставила! Красотааа!https://bibliomir83.blogspot.com/2021/05/blog-post.html#more

    ОтветитьУдалить
  5. Ирина, посмотрела. Очень интересно ты их применила. Сразу идейка - можно в качестве приветствия или подписи установить в конце, как у тебя.

    ОтветитьУдалить
  6. ДА, ТОЛЬКО В КОНЦЕ БЛОГА "сайт ШКОЛЫ" ОН ПЕРЕСТАЛ РАБОТАТЬ- ПРИШЛОСЬ УДАЛИТЬ. Видимо "что - то" ругается и не пускает новенького"

    ОтветитьУдалить
  7. Ирина, это где сайт школы.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML