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

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




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

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

Установка:

HTML

Код

<div class="smena_kartinok">
  <div class="sobrazhenia_1">
  <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/zorten-1.jpg" />
  </div>
  <div class="sobrazhenia_2">
  <img src="http://zornet.ru/zorner_ru_1/ABVUSA/lopasden/zorten-2.jpg" />
  </div>
</div>


CSS

Код

.smena_kartinok {
  max-width: 392px;
  width: 100%;
  margin: 18px auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(37 37 37 / 20%), 0 16px 20px rgba(37 37 37 / 20%);
}
.smena_kartinok img {
  width: 100%;
  box-shadow: 0 4px 12px rgb(37 37 37 / 20%), 0 16px 20px rgb(37 37 37 / 20%);
}
.smena_kartinok .sobrazhenia_1 {
  position: relative;
  animation: rotate 10s linear 5s infinite;
}
.smena_kartinok .sobrazhenia_2 {
  position: absolute;
  top: 0;
  animation: rotate 10s linear infinite;
}
@keyframes rotate {
  0% {
  opacity: 1;
  transform: rotate(0) scale(1);
  }
  40% {
  transform: rotate(0) scale(1);
  opacity: 1;
  }
  49.99999% {
  transform: rotate(45deg) scale(3);
  opacity: 0;
  z-index: 1;
  }
  50% {
  transform: rotate(0) scale(1);
  opacity: 0;
  z-index: -1;
  }
  100% {
  opacity: 1;
  transform: rotate(0) scale(1);
  z-index: -1;
  }
}


Как все изначально происходит, то здесь нет оформление, а поставлена картинки, где за ней вторая. Где все выполнено на чистой стилистике, что немного под светлый формат прописаны тени.

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

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

Скачать Эффект CSS для смены двух фотографий
Категория: Скачать Скрипты Ucoz бесплатно бесплатно | Добавил: diamont1977
Просмотров: 19 | Загрузок: 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 бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    Стиль для ...
    Etxt Антип...
    Предпросмо...
    Фоны для ф...
    Стиль для ...
    Шрифт - An...
    Партнеры д...