Все для веб-дизайнера
Как создать анимацию для миниатюр сайта на CSS
Много кто из Вас начинающий разработчик, и мало кто уделяет внимание мелочам, а именно эффектам на сайте. Не спорю, минимализм сейчас в тренде, но нужно создавать нечто уникальное и привлекательное, а здесь не обойтись без разных заплаток. Большую роль на сайте играют изображения, а именно то, как они организованы и поданы пользователю для обозрения. В данном уроке мы рассмотрим как организовать и придать анимацию, В демонстрационных примерах мы поместили изображения в ненумерованные списки и ссылки.
В данной демонстрации мы использовали десять различных эффектов, все они достаточно просты, но при этом смотрятся эффектно. И так, давайте рассмотрим.
Шаг 1. CSS
Дадим пример для эффекта “scale и rotate”. В этом случае, активный класс будет “scaleRotateOut”. tt-empty используется для того, чтобы определить был ли элемент пуст до данного момента. В этом случае, не убираем ссылку:
|
1 2 3 |
.tt-effect-scalerotate.tt-effect-active li:not(.tt-empty) a:first-child { animation: scaleRotateOut 0.6s forwards; } |
У нас есть дополнительная ссылка появится при другой анимации. В этом случае, элемент изначально был пуст, так что нам нужно обработать это следующим образом:
|
1 2 3 4 5 |
.tt-effect-scalerotate.tt-effect-active li a:nth-child(2), .tt-effect-scalerotate.tt-effect-active li.tt-empty a { opacity: 0; animation: scaleRotateIn 0.6s forwards; } |
Если ссылка была добавлена в элемент, то просто плавно отобразим его:
|
1 2 3 |
.tt-effect-scalerotate.tt-effect-active li:not(.tt-empty) a:only-child { animation: fadeOut 0.6s forwards; } |
Последним шагом мы будем осуществлять анимацию:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@keyframes scaleRotateOut { 100% { opacity: 0; transform: scale(0); } } @keyframes scaleRotateIn { 0% { opacity: 0; transform: translateX(50%) translateY(100%) rotate(25deg); } 100% { visibility: visible; opacity: 1; transform: translateX(0%) translateY(0%) rotate(0deg); } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } |
Следует отметить, что не все последние браузеры поддерживают данные эффекты, по этому данные эффекты относятся к концептам.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 05.10.2013 в 12:53, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...