Мигающий текст в кнопке с помощью CSS
 | |
| Красиво использованный эффект мешающего текста с помощью CSS, что находится в элементе виде кнопки, где безусловно привлекает больше внимание. Все создано на чистых стилях CSS, где самостоятельно задается скорость, что можно сделать быстрое мигание или замедлить его. Здесь изначально используется анимация под заданный объект, где все сделано для того, чтоб эффект был как можно ярче на нашей кнопке. Сам дизайн объекта будет сделан под темную палитру, но это не дает, что под светлую гамму сделать нельзя. Все можно вывести, но просто на белом фоне как то не сильно заметно станет мигать темный шрифт, но если только это не аналогичный стиль сайта. Здесь однозначно функция анимации потребует, чтобы были загаданные ключевые кадры, все делается для того, чтобы вызвать этот эффект. А вообще это очень простой способ веб разработчика, что заставить мигать текст или прикрепленный шрифтовой значок, используя только HTML и CSS3. Рассмотрим как выглядит на светлом фоне:  Это уже на темном, с аналогичными по гамме тенями:  Приступаем к установке: HTML Код <div class="poskubleb-meoptivons"><span>Скачать файл</span></div> CSS Код .poskubleb-meoptivons { width: 235px; height: 49px; background-color: #c10bc1; padding: 20px; text-align: center; line-height: 50px; border-radius: 100px; border: 3px solid #efe3e3; box-shadow: 1px 2px 20px 0px rgba(31, 29, 29, 0.73), 0px 1px 19px 1px rgba(39, 37, 37, 0.83); } span{ font-size: 30px; font-family: cursive; color: white; animation: blink 0.5s linear infinite; } @keyframes blink{ 0%{opacity: 0;} 50%{opacity: .5;} 100%{opacity: 1;} } В большинстве такой метод используют для привлечение внимание, так как можно создать как небольшую по ширине элемент, так и большой, как понимаете все зависит он ключевого слова. В самой анимации по умолчанию указана функция, где продолжительность анимации повторялась, а значит она работает постоянно без остановки. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
