• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Как использовать CSS3 для создания эффекта Fade (Плавно по выцветанию эффект картинок и текста)
Как использовать CSS3 для создания эффекта Fade
Kosten
Дата: Среда, 2018-01-31, 19:45 | Сообщение 1
Администраторы
Сообщений:18771
Награды: 55


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

Вставьте этот код в тело вашего html:

Код
<div id="fade">ZorNet: Создание сайта на uCoz</div>

CSS

Этот код css заставит весь #fade div исчезать до нуля, когда он зависает:

Код
#fade{
  opacity: 1;
  -webkit-transition: opacity 1s linear;
}
#fade:hover{
  opacity: 0;
}

Благодаря свойствам и свойствам прозрачности webkit CSS3, легко дублировать эффекты JavaScript и jQuery с помощью CSS. Определяя параметры свойства -webkit-transition для прозрачности 1s linear, мы определяем, какое свойство переходит в не прозрачность, как долго (1s) и будет ли переход изменять скорость на протяжении всей продолжительности. Простота этого кода делает CSS3 реальным конкурентом jQuery с точки зрения создания такого эффекта затухания.

Демонстрация:
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Как использовать CSS3 для создания эффекта Fade (Плавно по выцветанию эффект картинок и текста)
  • Страница 1 из 1
  • 1
Поиск: