Слайдер с автоматическим текстом на CSS3
Отличное решение для показа описания, как адаптивный слайдер для текста, который выполнена на чистом CSS, где идет показ в автоматическом режиме. Если вам на сайте нужно вместо изображений показать текст или описание, то здесь представлен авто-текст слайд-шоу в стандартной структуре слайдера, где идет конфигурация слайда с автоматическим текстом, которых многих поразит. Для того, чтоб задействовать плавное и ощутимое воздействие значений, то здесь задействовали содержимое HTML вместе с содержимым CSS. Где под такой формат можно поставить разные направление по описанию, и даже прописать ссылку, чтоб произвести прямой переход. Как можно заметить по стилистике дизайна, то на экране можно разместить разную текстуру. Где остальное по функционалу идет как у стандартного слайда на изображение, где также присутствует определенный промежуток времени текст, который в последствии заменяется другими текстами. Режим показа, то здесь представленный текст скользит с левой стороны на правую, раскрывая себя. Если вы хотите реализовать это слайд-шоу, то здесь не чего сложного, а точнее нужно заменить тексты на свои Как пример, отлично подойдут цитаты или несколько мотивирующих строк, который может носить разный тематический характер. Текстовой слайдер на чистом CSS ![]() Полностью код, что используется для создания этого плана, представлен вам внизу. Где без особых сложностей можно кардинально поменять код, а также добавить основные моменты, которые необходимы для того, чтобы слайд-шоу отлично вписался в вашу структуру. Установка: HTML Код <p class="tekstovoye_opisaniye_1">Советы по удаленному управлению проектами для работы из дома.</p> <p class="tekstovoye_opisaniye_2">Что такое удаленное управление проектами?</p> <p class="tekstovoye_opisaniye_3">Улучшите стратегию SEO с помощью этих четырех инструментов</p> CSS Код .tekstovoye_opisaniye_1, .tekstovoye_opisaniye_2, .tekstovoye_opisaniye_3 { position: absolute; display: block; top: 2em; width: 60%; font-size: 2em; animation-duration: 20s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .tekstovoye_opisaniye_1{ animation-name: anim-1; } .tekstovoye_opisaniye_2{ animation-name: anim-2; } .tekstovoye_opisaniye_3{ animation-name: anim-3; } @keyframes anim-1 { 0%, 8.3% { left: -100%; opacity: 0; } 8.3%,25% { left: 25%; opacity: 1; } 33.33%, 100% { left: 110%; opacity: 0; } } @keyframes anim-2 { 0%, 33.33% { left: -100%; opacity: 0; } 41.63%, 58.29% { left: 25%; opacity: 1; } 66.66%, 100% { left: 110%; opacity: 0; } } @keyframes anim-3 { 0%, 66.66% { left: -100%; opacity: 0; } 74.96%, 91.62% { left: 25%; opacity: 1; } 100% { left: 110%; opacity: 0; } } Как заметили, что на данном корпусе нет стрелок для переключения слайдов по обе стороны, а также нижних переключателей, что совершенно здесь они будут лишними. Здесь написанная текстура будет меняться автоматически в скользящем движении. В стилях присутствует @Keyframes, что в большинстве контролирует большую часть анимации. Ведь в начинки функций не задействуем Javascript, поэтому вам не нужно беспокоиться о кодах, где самостоятельно выстроить скоростной режим или поменять на свою палитру цветов. Демонстрация |
Поделиться в социальных сетях
Материал разместил
Комментарии: 0 | |