• Страница 1 из 1
  • 1
Форум » Веб-разработка » Элементы HTML » Красивое CSS появление кнопки для сайта (Анимационная кнопки при открытие сайта на чистом CSS)
Красивое CSS появление кнопки для сайта
Kosten
Дата: Четверг, 2020-06-25, 22:42 | Сообщение 1
Оффлайн
Администраторы
Сообщений:28886
Награды: 62


Стильно созданная анимация для появления кнопки перехода, где при открытии сайта или страницы она появляется с левой стороны, что просто смотреться шикарно. В этой статье мы создаем слайд-анимацию с помощью CSS3. Slide-in Animation - это очень важная анимация, когда вы хотите показать слайд HTML-элемента слева направо. Мы создаем слайд-анимацию слева направо. Таким образом, это означает, что при загрузке страницы она будет скользить с левой стороны и вставляться в указанную позицию. CSS3 Предоставьте нам лучший способ создать удивительную анимацию.

Мы просто создадим фрагменты HTML5, и свяжем файл Style.css, используя тег link. Если вы укажете другое имя для файла Style.css, измените его на имя файла таблицы стилей. В теге body вставьте контейнер класса. Мы используем класс Container для центрирования элемента. В этом классе вставьте кнопку с классом slide_in. Используя класс Slide_in, мы получаем доступ к кнопке в таблице стилей. Поэтому мы выберем кнопку с помощью селектора классов. Наконец, укажите Slide in Text для кнопки.

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



HTML

Код
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Slide In</title>

    <link rel="stylesheet" href="Style.css">
</head>
<body>
    
    <div class="container">
        <button type="button" class="slide_in">Slide In</button>
    </div>

</body>
</html>

CSS

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

Код
.container{
    text-align: center;
    margin-top: 20%;
}

.slide_in{
    font-size: 1.7em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: .5em 1.5em;
    border: 0;
    border-radius: .1em;
    background-image: -webkit-radial-gradient(white, #eee);
    background-image: radial-gradient(white,#eee);
    animation: slideMe .7s ease-in;
}

@keyframes slideMe{
    0%{
        transform: skewX(53deg) translateX(-500px);
        opacity: 0;
    }
    60%{
        transform: translateX(0px);
    }
    62%{
        transform: skewX(0deg) translateX(30px);
    }
    70%{
        transform: skew(-20deg);
        opacity: 1;
    }
    80%{
        transform: skew(0deg) translate(0);
    }
    90%{
        transform: skew(-5deg);
    }
    100%{
        transform: skew(0deg);
    }
}

Теперь просто посмотрите на пример и узнайте, как создавать слайд-анимацию с использованием HTML и CSS. На изображении выше вы увидите кнопку в центре экрана. Мы будем двигать эту кнопку слева направо.

Демонстрация
Прикрепления: 7878496.png(29.9 Kb) · animation.zip(3.0 Kb)
Страна: (RU)
Форум » Веб-разработка » Элементы HTML » Красивое CSS появление кнопки для сайта (Анимационная кнопки при открытие сайта на чистом CSS)
  • Страница 1 из 1
  • 1
Поиск: