В статье узнаете, как создать красивый эффект подчеркивание, который будет работать при навиденее клика, где только задействуем 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 для создания этой удивительной анимации.
Демонстрация
