Плавное появление и исчезновение текста CSS
 | |
| Это оригинально сделанная текстовая анимации, где по умолчанию будет плавно появляться знаки или буквы, что аналогично исчезать на фоне. Здесь каждое текстовое письмо, имеющее общие свойства анимации и его значение, разделенное свойством анимации задержки для продвижения CSS. Форма действие, вы задаете знаки и прописываете в код, который лучше устанавливать на полноценную страницу. Так как такой эффект больше предназначен для современного дизайн, где для него нужно больше места для основы и полноценной работы. Все сделано на чистых стилях CSS, где и задается ранжирование, которое вы сами можете регулировать, так как вам нужно. Сам эффект заключается в том, что из фона появляться знаки, и автоматически им устанавливать тени, что становятся отлично просматриваемые. Но потом они начинают постепенно исчезать, так с тенями исчезает сам знаки, который идет по правую сторону. Но здесь автоматически по левую сторону появляться новый, что можно сказать, происходит круговорот. Для этого эта анимация была создано, но, во-первых, это стильно смотрится на любом ресурсе, не говоря о тематическом наклонение, также можно самому поменять оттенок цвета. Приступаем к установки: HTML Код <div class="kespatares kespatares-1"> <span>С</span> <span>А</span> <span>И</span> <span>Т</span> </div> <div class="kespatares kespatares-1"> <span>S</span> <span>E</span> <span>O</span> </div> <div class="kespatares kespatares-1"> <span>C</span> <span>S</span> <span>S</span> <span>3</span> </div> CSS Код body { background: #19ab8e; overflow-x: hidden; font-family: 'Rubik Mono One', sans-serif; padding: 119px; text-align: center; } .kespatares { color: #19ab8e; font-size: 0; line-height: 1; } .kespatares span { font-size: 119px; display: inline-block; -webkit-animation: move 2s ease-in-out infinite; animation: move 2s ease-in-out infinite; } .kespatares span:nth-child(2) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .kespatares span:nth-child(3) { -webkit-animation-delay: 1.0s; animation-delay: 1.0s; } .kespatares span:nth-child(4) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } @-webkit-keyframes move { 0% { -webkit-transform: translate(-33%, 0); transform: translate(-33%, 0); } 50% { text-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); } 100% { -webkit-transform: translate(33%, 0); transform: translate(33%, 0); } } @keyframes move { 0% { -webkit-transform: translate(-33%, 0); transform: translate(-33%, 0); } 50% { text-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); } 100% { -webkit-transform: translate(33%, 0); transform: translate(33%, 0); } } * { box-sizing: border-box; } Сам эффект происходит на зеленом фоне, который вы в стилистике можете поменять, также под этот оттенок нужно сменить гамму для знаков. Это для того. чтоб появилась красивая картинка для появление из фона разнообразных знаков или небольшого текста. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
