| 22.12.2023, 20:58 | |
2 Эффекта для изображений на простом CSS  Здесь представлены 2 эффекта при наведении клика на них, что выполнены на чистом CSS, но главное в HTML по умолчанию прописаны операторы под uCoz. Это для тех веб мастеров, у которых ресурс установлен на конструкторе. Это так для понимания, чтоб вам не нужно добавлять или менять. Но при этом сами эффекты обширны, что можно установить на сайт или блог разного хостинг. Ведь, если посмотреть на demo страницу, то там все операторы убраны, чтоб не мешали, а оставлена одна анимация, которая состоит из стилистики CSS. Этот эффект попался, и если его реально применить на разном устройстве, примерно как на слайдере, что идет в одну колонку, то смотрится оригинально. Один из них делает полный разворот, где при этом картинка немного увеличивается, и все это, пока курсор находится на снимке. Второй немного проще, где при наведении он увеличивается на несколько пикселей. Но все это настраивается в закрепленных стилях, где их немного для задействования анимационного эффекта, где изначально выставляем высоту и ширину данного изображение. За пример можно взять слайдер для применение или другие элементы.  Первый вариант под увеличение изображений на сайте: Установка: HTML Код <a href="$ENTRY_URL$" title="$TITLE$"><span class="movie-name">$TITLE$, $ENTRY_CATS$</span><img id="li" src="$IMG_URL$" width="156" height="194" alt="$TITLE$" /></a> CSS Код #li{transition: 1s; position: relative; opacity:0.6;} #li:hover{transform: scale(1.1) rotate(360deg); transition: 1s all; opacity:1;} На этом установочный процесс завершен. Второй вариант состоит в развороте снимка с увеличением: Как заметили, второй вариант изначально идет без оператора, здесь нужно только заполнить или прописать ссылку под данный снимок. Но и HTML и CSS сделаны вместе, где и на первом варианте можно все выставить, чтоб быстро поставить по месту, где должны снимки отображаться. HTML Код <a href="#" style="text-decoration: none;" ><img id="m" src="Здесь ссылка изображения или данный оператор, что выводит картинку" style="height:138px; width:104px;"></a> <style> #m{ transition: 1s; position: relative; opacity:0.5; } #m:hover{ transform: scale(1.1); transition: 1s all; border:2px;border-radius:8px; border-color: #ffffff; opacity:1.0; } </style> На этом все, сама анимация по своему оригинальна, где вы самостоятельно можете задать скорость разворота, а также на сколько пикселей нужно увеличение с прописанными тенями, но если ставить под светлый формат. Демонстрация Скаать 2 Эффекта для изображений на простом CSS | После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!|
|
| |
| Просмотров: 19 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
Шаблоны Ucoz бесплатно
[24]
Скачать бесплатно Шаблоны Ucoz бесплатно
|
|
Скрипты Ucoz бесплатно
[94]
Скачать Скрипты Ucoz бесплатно
|
|
Шапки для Ucoz
[0]
Скачать Шапки Ucoz бесплатно
|
|
Иконки для Ucoz
[5]
Иконки Ucoz бесплатно
|
|
Кнопки Ucoz бесплатно
[3]
Тут найдете и скачаете Кнопки Ucoz бесплатно
|
|
Уроки Ucoz бесплатно
[5]
Тут найдете и скачаете Уроки Ucoz бесплатно
|
|
Для Форумов Ucoz бесплатно
[0]
Тут найдете и скачаете Для Форумов Ucoz бесплатно
|
|
Разное Ucoz бесплатно
[38]
Тут найдете и скачаете Разное Ucoz бесплатно
|
Администрация проекта не несет какую-либо ответственность за материалы.
Seo-vebmaster.ucoz.net © | Карта сайта | Карта форума | RSS лента | uCoz
Система Ucoz
PhotoShop
Для Сайта
Наш Форум
Клуб