• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать печатную анимацию текста на CSS (Как сделать печатающий текст с анимацией с помощью CSS)
Создать печатную анимацию текста на CSS
Kosten
Дата: Пятница, 2019-03-22, 20:51 | Сообщение 1
Администраторы
Сообщений:22338
Награды: 56


Печатающий текст на сайте, это отличное привлечение внимание, ведь думаю интересно посмотреть полностью отпечатанный текст, который безусловно должен интересен пользователю. И вашему вниманию вариант печатного текста, который полностью создан на чистом CSS. Где вы можете поставить под заголовок или под другие функций, ведь все смотрится оригинально.

Также вы самостоятельно выставляете шрифт или ставите ту скорость открытие знаков, а в нашем случай, чтоб как можно быстрей отпечатывало или наоборот медленней, вся это настройка происходит в CSS.



Установка:

HTML

Код
<h1>Здесь идет текст, который будет в печати появляться</h1>

CSS

Код
@-webkit-keyframes typing {
    from { width: 0 }
    to { width:17em }
}

@-moz-keyframes typing {
    from { width: 0 }
    to { width:17em }
}

@-webkit-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

@-moz-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

body { font-family: Consolas, monospace; }

h1 {
    font-size:21px;
    width:28.9em;
    white-space:nowrap;
    overflow:hidden;
    border-right: .1em solid black;
    
    -webkit-animation: typing 20s steps(30, end),
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 20s steps(30, end),
                        blink-caret 1s step-end infinite;
}


Под каждое название ставим длину заголовка, это для того, чтоб все знаки появились.

Демонстрация
Прикрепления: 4737662.png(53.9 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 2019-03-22, 20:57 | Сообщение 2
Администраторы
Сообщений:22338
Награды: 56


Также еще одна похожая по функциям анимация печати текста, только в CSS немного по другому выстроено.

Установка:

HTML

Код
<h1>Здесь ваш текст<span> </span></h1>

CSS

Код
@-webkit-keyframes typing {
    from { width: 100% }
    to { width:0 }
}

@-webkit-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

@-moz-keyframes typing {
    from { width: 100% }
    to { width:0 }
}

@-moz-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}

body { font-family: Consolas, monospace; }

h1 {
    position: relative;
    float: left;
    font-size:150%;
}

h1 span {
    position:absolute;
    top:0;
    right:0;
    width:0;
    background: white; /* same as background */
    border-left: .1em solid black;
    
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
    -webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
    -moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
                        blink-caret 1s step-end infinite;
}


Демонстрация
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать печатную анимацию текста на CSS (Как сделать печатающий текст с анимацией с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: