<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Плавный переход в CSS - transition на примерах

Плавный переход в CSS - transition на примерах

Эффект плавного перехода в CSS часто применяется при наведении курсора на какой-нибудь элемент, например для кнопки. Когда при наведении курсора, кнопка меняет свой цвет, процесс замены происходит очень быстро и резко, то хочется это действие замедлить.

Добиться эффекта плавного перехода можно с помощью CSS свойства – transition, где
all – эффект замедления применяется ко всем возможным переходам
1s – время выполнения плавного перехода
ease – способ выполнения плавного перехода

transition: all 1s ease;

Анимация кнопки при наведении

Демонстрация работы анимации кнопки, верхий рисунок: демо

Плавный переход в CSS – transition на примерах

Свойство transition следует прописать к элементу, в нашем случае это кнопка button, а не к его состоянию, то есть псевдоэлементу hover. Тогда плавный переход будет работать не только при наведении, но и при снятии курсора с элемента.

<h2>Плавный переход transition CSS. Кнопка</h2>
    <div>
      <a class="button" href="#">Заказать работу</a>
    </div>
.button {
    background-color: #2bc6a4;
    border: none;
    border-radius: 15px;
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
    width: 20%;
    margin: auto;
    font-family: sans-serif;
    font-size: 22px;
    text-decoration: none;
    transition: all 1s ease;
}

.button:hover {
    background-color: #4feac8;
}

Анимация фона при наведении при участии transition

Демонстрация работы анимации кнопки, нижний рисунок: демо

Плавный переход в CSS – transition на примерах

Создадим круг, при наведении на который будет плавно меняется его цвет. Для этого создадим тег div с классом circle, внутри которого пропишем тег span с текстом.

<h2>Плавный переход transition CSS. Круг</h2>
    <div class="circle">
        <span>Иконка</span>
    </div>

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

В CSS коде оформим внешний вид первого круга, в обычном состоянии и он будет черного цвета.

.circle{
    background: #3d3d3d;
    width: 198px;
    height: 198px;
    margin: 0 auto;
    line-height: 200px;
    color: #fff;
    font-size: 1.8em;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    text-align: center;
}

Для текста ставим z-index: 2, таким образом текст будет на самом верхнем слое.

.circle span{
    position: relative;
    z-index: 2;
}

Для построения второго, зеленого круга, мы воспользуемся псевдоэлементом after – это то, что идет после блока. Обязательно прописываем пустую строчку content: " "; иначе псевдоэлемент не отобразится. Зададим ширину и высоту точно такую же, как и у первого круга и желаемый цвет при наведении.

Плавный переход в CSS – transition на примерах

Прописываем display: block, чтобы наш псевдо-круг вообще появился. Итак, псевдо-круг расположился ниже под первым кругом. С помощью свойств position, мы совмещаем оба круга, друг под другом, а свойство z-index: 1, слой с псевдо-кругом размещает под текстом.

.circle::after{
    content: " ";
    width: 202px;
    height: 202px;
    background: #2bc6a4;
    position: absolute;
    display: block;
    border-radius: 50%;
    top: -1px;
    left: -1px;
    box-shadow: 0 0 0 0 #3d3d3d inset;
    transition: width 1s ease-in-out, height 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out;
}

Теперь необходимо сделать, чтобы при наведении зеленый круг пропадал, а вместо него появлялся черный. Поэтому мы будем делать следующее, при наведении на класс circle, псевдоэлемент after будет постепенно исчезать. Работа transition показана в строчке кода ниже.

transition: width 1s ease-in-out, height 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out;

и исчезнет совсем

width: 0;
height: 0;
font-size: 0;

исчезает красиво, по-центру

top: 100px;
left: 100px;

box-shadow растушёвывает края зеленого круга

.circle:hover::after{
    width: 0;
    height: 0;
    font-size: 0;
    top: 100px;
    left: 100px;
    box-shadow: 0 0 20px 20px #3d3d3d inset;
}

Итоги

На самом деле свойство transition очень простое, успешность его применения зависит только от ваших знаний CSS в целом.

Вы можете узнать больше, просмотрев этот видеокурс "Вёрстка сайта с нуля"

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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