Эффект мигающее изображение на CSS3
 | |
| В этой статье узнаете, как можно создать мигающее изображение на чистом CSS, которое в большинстве применяться для привлечения внимание на сайте. Так как считаю это отличное решение с подключением такого эффекта, где можно задать скорость мигание с выводом на любой материал. Если говорить по изображение, то здесь можно смотреть на картинки или кнопки, что при открытии начинают создавать эффект, который отлично виден на светлом или темном формате сайта. Где в стилистике заданны руководство, что будет пропадать предмет, а потом появляться, что в дальнейшем получается полноценное мигания заданного элемента, который будет подключиться по ссылке. А что это будет, здесь вы сами решайте, но главное под какие функции его поставить. Как пример, возьмем небольшой размер, который выводим на картинку, и задаем ему эффект, что безусловно она при заходе на блог или сайт сразу будет замечена, и привлечет на себя внимание Сам эффект по своему функционалу можно задействовать на многих материалов, это от статистики или вам иногда нужно добавить мигание по своей тематике, что ставим любой предмет изображение, но лучше формате png, и настраиваем нужную скорость. Установка: HTML Код <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/ava-5.png" alt="ZorNet.Ru — сайт для вебмастера"> CSS Код @-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} @-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} @-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} @keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} img { border:1px solid #646469; box-shadow: 1px 1px 6px rgba(109, 109, 109, 0.74), 1px 2px 30px -15px rgba(49, 49, 49, 0.92); -moz-transition:all 2s ease-in-out; -webkit-transition:all 2s ease-in-out; -o-transition:all 2s ease-in-out; -ms-transition:all 2s ease-in-out; transition:all 2s ease-in-out; -moz-animation:blink normal 3s infinite ease-in-out; -webkit-animation:blink normal 3s infinite ease-in-out; -ms-animation:blink normal 3s infinite ease-in-out; animation:blink normal 3s infinite ease-in-out; } Довольно оригинально смотрится, когда происходит исчезающее изображение входа или выхода, а также анимация ключевых кадров CSS3, которые написаны в сокращенном виде.Здесь уже добавил теней, что можно убрать, это для того, чтоб на светлом фоне гораздо ярче смотрится. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |