Ответы пользователя по тегу CSS
  • Стоит ли использовать emoji в верстке ‍♂️?

    Вы с какого устройства смотрите на этот эмодзи, с ПК с ОС WIndows? Он выглядит красиво. А вот другой пользователь будет смотреть со своего ПК и у него не будет шрифта с этими эмодзи, третий же будет смотреть с телефона, у него эти же эмодзи будут выглядеть по другому. Лучше всего используйте иконки по типу font awesome.
    Ответ написан
    Комментировать
  • Как реализовать анимированное появление текста по буквам?

    Acrilo
    @Acrilo Автор вопроса
    Нашлось решение на чистом JS и CSS.

    JS
    function animateWord(word){
        let text = word.dataset.text;
        text.split('').forEach((letter,ind) => {
        let div = document.createElement('div');
        div.innerText = letter;
        setTimeout(()=> word.append(div),ind*200);
      })
    }
    
    const word = document.querySelector('.word');
    animateWord(word);


    CSS
    @keyframes letter{
      0% {opacity: 0; transform: translateY(-15px)}
      100% {opacity: 1; transform: translateY(0px)}
    }
    
    .word div {
      animation: letter 0.5s;  
      display: inline-block;
    }


    HTML, текст в атрибуте "data-text".
    <div class="word" data-text='Hello'></div>

    Пусть на сайте примере и выглядит немного не так и текст не в атрибуте HTML тега, но можно стилизовать под себя.
    Ответ написан
    Комментировать