Эффект пульсации при клике при помощи CSS
 | |
| Красиво созданный анимационный эффект пульсаций элемента, который происходит при наведении клика, и начинает заданное время пульсировать. Эти функции CSS3, вероятно, наиболее популярны среди разработчиков, а также добавляют профессиональные ощущения. Так как ее можно поставить на любую кнопку, но мы за основу возьмем шрифтовые кнопки Font Awesome, что будут выводить веб иконки. Обратите внимание на свои кнопки с этим тонким, но увлекательным эффектом. Просто добавьте класс в свою кнопку или в элемент виде каркаса и также блока, так как такой эффект можно сделать по разным размерам. Это предназначено для плавающих кнопок, поэтому может не работать с каждым компонентом. Там только останется создать красивый дизайн, хотя изначально он не плохо сделанный, но здесь на любителя, но и главное, это где применять будет. Так как эта кнопка может стоять под ссылкой, чтоб вывести на другую страницу. Здесь немного добавил теней, создал светлый обвод под эти тени, что как видим от Demo страници отличается, даже той же кнопкой, что по умолчанию в материале поставил. Здесь просто некий показ, как можно кардинально изменить, а также все оставить как идет. Эффект красиво будет смотрется как на светлом ресурсе так и на темном, главное под функцию его правильно поставить, чтоб по одному виду было понятно. Так идет в материале, что представлено ниже в HTML и CSS стилях:  Здесь уже немного измененный вид, где стилей добавлено для оформление:  Так реально смотрится при проверке, но как было сказано в описание, стиль или каркас вы сами выбираете, где находится кнопки, и также не забываем, какой по формату, так как кнопки могут быть разные и можно так сделать, что и разнообразные вариаций будут. Приступаем к установке: HTML Код <div class="pulsating_elementa"> <span><i class="fa fa-thumbs-up"></i></span> <a href="http://zornet.ru/news">Пульсирование</a> </div> CSS Код .pulsating_elementa { display: table; cursor:pointer; } .fa-thumbs-up { color: #fff; display: inline-block; font-size: 21px !important; text-shadow: 0 2px 3px rgba(31, 30, 30, 0.14); transform-origin: 47% 47% 0; vertical-align: middle; line-height: 31px !important; } .pulsating_elementa span { background-color: #880f3d; border-radius: 71%; display: inline-block; margin: 17px 7px; padding: 7px; width: 32px; height: 32px; text-align: center; border: 1.7px solid #ececec; box-shadow: 0px 5px 9px rgba(90, 86, 86, 0.48), 0px 7px 25px -15px rgba(29, 27, 27, 0.16); } .pulsating_elementa:hover > span i { animation: 1500ms ease 0s normal none 1 running pulse; } @keyframes pulse { 0% { transform: scaleX(1) scaleY(1); } 10% { transform: scaleX(0.85) scaleY(0.85); } 20% { transform: scaleX(1) scaleY(1); } 30% { transform: scaleX(0.85) scaleY(0.85); } 40% { transform: scaleX(1) scaleY(1); } 50% { transform: scaleX(0.85) scaleY(0.85); } 60% { transform: scaleX(1) scaleY(1); } 70% { transform: scaleX(0.85) scaleY(0.85); } 80% { transform: scaleX(1) scaleY(1); } 90% { transform: scaleX(0.85) scaleY(0.85); } 100% { transform: scaleX(1) scaleY(1); } } И здесь можно поменять изображение, что ближе подходит к тематическому на интернет ресурсе. Не знаю почему, но считаю одним из самых популярных функций, это пульсирующий текст, так как он разнообразен и применение у него обширное. На некоторых страницах нажатие на ссылку или контакт на странице не прокручивает вас очень далеко вниз по странице. Вот по этому он и привлекает внимание, хотя изначально он по умолчанию смотрится как простой элемент стилистики, до того времени, пока на него не навели клик, тут и начинает работать эффект по заданной вами траекторий. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
