• Страница 1 из 1
  • 1
Форум » Веб-разработка » Структура кода HTML » Анимация CSS для подчеркивание ссылок на сайте (Создание анимации при наведении границы с помощью CSS3)
Анимация CSS для подчеркивание ссылок на сайте
Kosten
Дата: Четверг, 2020-06-25, 21:50 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26678
Награды: 61


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

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



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

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>Border Animation</title>

    <link rel="stylesheet" href="Style.css">
</head>
<body>
    

    <div class="text-center">
        <a href="#" class="hover-border">Hover</a>
    </div>

</body>
</html>

CSS

Код
body{
    background: #7F7FD5;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #EC6EAD, #3494E6);
    background: linear-gradient(to right, #EC6EAD, #3494E6);

}

.text-center{
    text-align: center;
    margin-top: 20%;
}

.hover-border{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 80px;
    text-decoration: none;
    position: relative;
    color: white;
}

.hover-border::after{
    content: '';
    width: 0%;
    height: 7px;
    background: #7CFFBB;
    position: absolute;
    bottom: 0%; left: 50%;
    border-radius: 10px;
    transition: all 500ms ease;
}

.hover-border:hover::after{
    left: 0%;
    width: 100%;
}

Создаем несколько классов для создания анимации при наведении границы. Если вы запустите свой файл index.html, вы ничего не увидите, потому что мы не создаем стиль для элемента HTML. Теперь давайте посмотрим, что мы вставляем в Style.css для создания этой удивительной анимации.

Демонстрация
Прикрепления: 5223324.png(46.4 Kb) · border-animatio.zip(3.1 Kb)
Страна: (RU)
Форум » Веб-разработка » Структура кода HTML » Анимация CSS для подчеркивание ссылок на сайте (Создание анимации при наведении границы с помощью CSS3)
  • Страница 1 из 1
  • 1
Поиск: