Уважаемые пользователи seo-vebmaster.ucoz.net. Вы найдете у нас на портале - различные скрипты сайтов, уникальные, бесплатные шаблоны, модули, хаки и релизы популярных CMS . С Уважением Администрация seo-vebmaster.ucoz.net

Скачать Эффект качающиеся фоторамки на CSS3 бесплатно
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
23.12.2023, 15:19
Эффект качающиеся фоторамки на CSS3




Красивый эффект перекачиваемой рамки с изображением, что создан при чистом CSS, где анимация идет по умолчанию, но при наведении идет замирание. Что отличный вариант анимационного эффекта можно наблюдать на разных тематических сайтах. Это основа главной страницы, так как при открытии вы сразу обратите внимание, где вместо снимков можно разместить товары или категорий сайта, то что основном ищет гость или пользователь на данной тематике сайта.

И только остается заинтересовать, что при наведении та или иная рамка останавливается, а далее производим клик, где переходит по заданной ссылки. По своему характеру или по направлению можно такой трюк назвать навигацией или предоставлением информации, что мы в большинстве самый актуальный материал ставим на передний план. И теперь при заданной анимации и оригинального дизайна рамок, мы создаем данный информационный блок в своеобразном стиле.

Установка:

HTML

Код

<div class="swingin-picture">
  <figure class="achiesua">
  <img src="http://zornet.ru/_fr/79/s1547678.jpg" alt=""></img>
  <figcaption>Фото 1</figcaption>
  </figure>
  <figure class="achiesua">
  <img src="http://zornet.ru/_fr/79/s1875977.jpg" alt=""></img>
  <figcaption>Фото 2</figcaption>
  </figure>
  <figure class="achiesua">
  <img src="http://zornet.ru/_fr/79/s2290537.jpg" alt=""></img>
  <figcaption>Фото 3</figcaption>
  </figure>
</div>


CSS

Код

.swingin-picture {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}
.achiesua {
  margin: 20px;
  animation: achiesua ease-in-out 1s infinite alternate;
  transform-origin: center -20px;
}
.achiesua:hover {
  animation-play-state: paused;
}
.achiesua img {
  border: 5px solid #BFE2FF;
  display: block;
  width: 215px;
  height: 248px;
  object-fit: cover;
}
.achiesua figcaption {
  text-align: center;
  background: #415f77;
  color: #f9f9f9;
  padding: 4px 4px 8px 4px;
  font-family: Verdana, sans-serif;
}
.achiesua:after{
  content: '';
  position: absolute;
  width: 20px;  
  height: 20px;
  border: 2px solid #3f7aad;
  top: -10px;  
  left: 50%;
  z-index: 0;
  border-bottom: none;
  border-right: none;
  transform: rotate(45deg);
}
.achiesua:before {
  content: '';
  position: absolute;
  top: -23px;
  left: 50%;
  display: block;
  width: 1px;
  height: 1px;
z-index: 16;
}  
@keyframes achiesua {
  0% {  
  transform: rotate(3deg);  
  box-shadow: 6px 8px 22px rgba(0,0,0,0.3), 12px 16px 24px rgba(0,0,0,0.2);
  }
  100% {  
  transform: rotate(-3deg);  
  box-shadow: -6px 8px 22px rgba(0,0,0,0.3), -12px 16px 24px rgba(0,0,0,0.2);
  }
}


Перейдя на demo страницу, то вы увидите недостающий элемент дизайна, это гвозди, где закреплены картинки, то здесь их нет, так как под них очень много стилистики задействовано, где реально много места займет. Но кому они нужны, то просто возьмите box-shadow и пропишите по месту.

Демонстрация

Скачать Эффект качающиеся фоторамки на CSS3
Категория: Скачать Скрипты Ucoz бесплатно бесплатно | Добавил: diamont1977
Просмотров: 27 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
avatar
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мы в ВКонтакте
Популярные новости
Шаблон 7ol...
Шаблон для...
Уникальный...
Оригинал с...
Шаблон для...
Лучшие фай...
Последние ...
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Top.Mail.Ru

Анализ сайта seo-vebmaster.ucoz.net Яндекс.Метрика Catalog.ru.net - Каталог сайтов
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 13
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 1407
    Всего новостей: 0
    Всего статей: 0
    Темы форума: 1533
    Категории
    Шаблоны Ucoz бесплатно [24]
    Скачать бесплатно Шаблоны Ucoz бесплатно
    Скрипты Ucoz бесплатно [94]
    Скачать Скрипты Ucoz бесплатно
    Шапки для Ucoz [0]
    Скачать Шапки Ucoz бесплатно
    Иконки для Ucoz [5]
    Иконки Ucoz бесплатно
    Кнопки Ucoz бесплатно [3]
    Тут найдете и скачаете Кнопки Ucoz бесплатно
    Уроки Ucoz бесплатно [5]
    Тут найдете и скачаете Уроки Ucoz бесплатно
    Для Форумов Ucoz бесплатно [0]
    Тут найдете и скачаете Для Форумов Ucoz бесплатно
    Разное Ucoz бесплатно [38]
    Тут найдете и скачаете Разное Ucoz бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    Microsoft ...
    Фоны для ф...
    Шрифт - Br...
    Стили для ...
    Фоны для ф...
    Кисть для ...
    Фоны для ф...