Язык разметки гипертекста HTML

11. Интерактивные эффекты (динамический HTML).

Материал:

• Псевдоклассы:

  :hover - мышка поверх ссылки,

  :visited - пройденная ссылка,

  :link - активная ссылка.

  и т.д.

• Свойство transform например

     .turn:hover {
      -moz-transform: rotate(15deg); /* Для Firefox */
      -ms-transform: rotate(15deg); /* Для IE */
      -webkit-transform: rotate(15deg); /* Для Safari, Chrome, iOS */
      -o-transform: rotate(15deg); /* Для Opera */
      transform: rotate(15deg);
     }
   

• Свойство animation и CSS-анимации, правила @keyframes

  transition-property – свойство перехода

  transition-duration – продолжительность перехода

  transition-timing-function – временная функция перехода

  transition-delay - задержка начала перехода

  animation-iteration-count - повтор анимации

  animation-direction - направление анимации

  animation-play-state - проигрывание анимации

  animation-fill-mode - состояние элемента до и после воспроизведения анимации

  animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction; - краткая запись, возможно перечисление нескольких анимаций

@keyframes shadow {
  from {text-shadow: 0 0 3px black;} 
  50% {text-shadow: 0 0 30px black;}
  to {text-shadow: 0 0 3px black;}
}
div { 
  animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s; 
}

Задания:

Список заданий