<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Плавные переходы в CSS3.

Плавные переходы в CSS3.

Всем здравия! В этой статье мы разберём, как делать плавные переходы на CSS3, используя свойство transition.

Давайте подумаем, как сделать, чтобы, например, при наведении на какой-нибудь блок, он менял цвет текста, фона и тени плавно? Думаю, что многие сейчас ответят, что без скриптов тут не обойтись, но это не так! На помощь нам приходит свойство transition. Давайте поговорим, какие есть параметры у этого свойства.

transition-property: background;
transition-duration: 2s;
transition-delay: 1s;
transition-timing-function: ease;

В transition-property мы должны указать, что именно мы хотим анимировать. Например, background. Если вы хотите анимировать сразу все свойства css, то задайте значение all.

transition-duration задаёт время, которое будет длиться анимация. В нашем случае 2 секунды.

transition-delay задаёт задержку перед анимацией. Т.е. анимация произойдёт не сразу, а лишь спустя 1 секунду в нашем случае.

Теперь поговорим о transition-timing-function. Он может иметь несколько значений:

  • linear - эффект, при котором анимация будет длиться с одинаковой скоростью
  • ease - эффект, при котором анимация начнётся медленно, затем ускорится, а в конце снова замедлится
  • ease-in - эффект с замедленным началом
  • ease-out - эффект с замедленным концом
  • ease-in-out - эффект с замедленным началом и концом
  • cubic-bezier(n,n,n,n) - тут можно указать какие-нибудь свои значения от 0 до 1

Чтобы не рассписывать всё так длинно, есть сокращённая форма

transition: background 2s ease 1s;

Думаю, тут всё понятно. Сначала указываем, что мы анимируем, потом сколько времени будет длиться анимация, какой эффект применять и задержка перед анимацией(её может и не быть).

Мы рассмотрели свойство transition и теперь давайте закрепим наши знания на практике. Для этого анимируем div.

HTML разметка <html>
<head>
  <title>transition</title>
  <meta charset="utf-8">
</head>
<body>
  <div class="block">Кнопка клац!</div>
</body>
</html>

Теперь зададим ему стили, а затем я поясню

.block {
  width: 110px;
  padding: 15px 3px;
  background: #ccc;
  color: #fff;
  text-align: center;
  border-radius: 7px;
  font: 17px "Tahoma";
}

Вот, что у нас получилось:

блок

Теперь зададим стили при наведении

.block:hover {
  background: #fafafa;
  color: #ccc;
  box-shadow: 1px 3px 5px #ccc;
}

блок при наведении

Сейчас стили меняются, но не плавно, а резко. Чтобы это исправить, добавим только что изученное свойство transition.

.block: hover {
  /* ... стили */
  transition: all .5s ease-in-out;
}

Теперь при наведении стили будут меняться плавно, но когда вы отведёте мышку, то стили вернутся на первоначальные значения резко. Чтобы это исправить, добавим transition также к нашему блоку.

.block {   /* ... стили */   transition: all .5s ease-in-out; }

На этом всё для этой статьи. Обязательно попробуйте придумать себе какой-нибудь пример и сделать его, чтобы закрепить знания, которые вы получили сейчас. Удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (4):

Gluhar Gluhar 09.04.2014 21:18:16

В Ie 10 не работает.

Ответить

pavell pavell 09.04.2014 21:42:54

Я так понимаю HTML5 CSS3 и JS заменит флеш.

Ответить

1111g 1111g 15.10.2014 20:07:55

Не работает даже на етой странице

Ответить

pavell pavell 12.12.2014 20:45:10

Добрый вечер. Хочу сделать так чтобы при загрузке сайта стили к блоку применялись плавно. Прописываю эти свойства к блоку но не работает (все стили применяются сразу а не плавно). А вот если поставить :hover и в этом селекторе прописать этот код, то стили при наведении применяться будут плавно. Как сделать так чтоб без наведения а просто при загрузке страницы стили плавно переменялись (так как если просто прописать у блока нужный код то работать плавность не будет).

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.