Трансформация элементов на странице.

Приветствую всех, кто читает сейчас мою шпаргалки. Возвращаюсь к теме CSS и предлагаю вашему вниманию, как используются свойства transition, opacity и scale(2).

 Сделаем эффект плавно исчезающего текста или картинки. И эффект увеличения.
Все подробности  об этом расписывать не буду. Просто предложу, для тех кому интересно, замечательный учебник http://htmlbook.ru/css.

А если  уже сразу захотите такое применить , пожалуйста, готовые коды. Смотрим.

1. Затухание (свойство transition-opacity )

Наведите на написанный текст.

пока-пока

CSS.

<style>.transition-opacity {
  background:#B60E31;
  color: #FFF;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  max-width: 300px;
  font-size: 25px;
  border: 3px ridge pink  ;
  cursor: pointer;
  transition: 2s linear;
}
.transition-opacity:hover {
  opacity: .1;
}
</style>

HTML.

<div class="transition-opacity">ваш текст</div>

Проделаем то же самое только с картинкой.

В этом случае такой код HTML.

<div class="transition-opacity ">
<img alt="в шляпе" src=" путь к картинке(адрес)" height="100" width="300" /></div>

2.Увеличение (свойство transition-scale).

привет-привет

CSS.

<style>.transition-scale {
  position: relative;
  z-index: 2;
  background:#B60E31 ;
  color: #FFF;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  max-width: 500px;
  font-size: 25px;
  border: 3px ridge black;
  cursor: pointer;
  transition: 3s linear;
}
.transition-scale:hover {
  -webkit-transform: scale(2);
  transform: scale(2);
}</style>

HTML для текста.
<div class="transition-scale">
привет-привет</div>

HTMLдля изображения.

<div class="transition-scale">
<img alt="в шляпе" src=" адрес изображения" height="100" width="300" /></div>

3.Вращение (свойство transition-rotate )

кружите меня, кружите

CSS.

<style>.transition-rotate {
  position: relative;
  z-index: 2;
  background: #FFF;  
  color:   #808991;
border: 2px ridge red; //можно убрать из кода//
border-radius: 100%; //можно убрать//
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  max-width: 500px;
  font-size: 20px;

  cursor: pointer;
  transition: 4s linear;
}
.transition-rotate:hover {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}</style>

HTML для текста.
<div class="transition-rotate">
кружите меня, кружите</div>

HTMLдля изображения.
<div class="transition-rotate"><img alt=" рыбка" src=" https://lh3.googleusercontent.com/TkHYaSyJ_7zAKRJnb1UKSosTXBvbIWmIyiBEFVhvFAU=w252-h174-no" height="100" width="300" /></div>

4.Смещение вниз.

Ой, Ой,,, Куда это я

CSS.

<style>.transition-translate {
  position: relative;
  top: 0;
  z-index: 2;
  background:#EC8282 ;
  color: #FFF;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  max-width: 500px;
  font-size: 20px;
  border: 2px ridge red ;
  cursor: pointer;
  transition: 2s linear;
}
.transition-translate:hover {
  top: 50px;
}
</style>

HTML для текста.

<div class="transition-translate">
текст</div>

HTML для изображения.

<div class="transition-rotate"><img alt=" крот" src=" адрес картинки" height="100" width="300" /></div>

Реализация эффектов в блоге.

При написании сообщения переходим в режим HTML и где-нибудь в конце сообщения устанавливаем нужный код CSS. В том месте, где предполагается установить эффект  вставляем соответствующий HTML код. В стилях можно поменять, удалять или добавлять свои варианты.

background:#EC8282 ;//цвет фона//
  color: #FFF;//цвет текста //
  margin: 0 auto; //величина отступа//
  padding: 10px; //отступы вокруг содержимого//
  text-align: center;
  max-width: 500px; //максимальная ширина блока//
  font-size: 20px; //размер шрифта//
  border: 2px ridge red ; //размер и цвет рамки//
  cursor: pointer; //форма курсора при наведении//
  transition: 2s linear; //скорость//

Некоторые эффекты подглядела здесь.

У меня сегодня всё. Если что не понятно спрашивайте в комментариях. Во всём разберёмся. Спасибо, что читаете мои шпаргалки. Удачи всем.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email