Как создать анимацию границы с помощью CSS?

Опубликовано: 5 Января, 2022

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

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

HTML-код: мы создали HTML-файл и создали в нем div с h1 внутри div. Ниже приведен код того же.

<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
< title >GeeksforGeeks</ title >
</ head >
< body >
< div class = "geeks" >
< h1 >GeeksforGeeks</ h1 >
</ div >
</ body >
</ html >

Код CSS: CSS для этой анимации немного сложен, поэтому давайте попробуем разобраться в нем шаг за шагом.

Шаг 1: Первое, что мы сделали, это предоставили базовый фон и выровняли текст по центру. Ниже приведен код того же.

body {
margin : 0 ;
padding : 0 ;
background : green ;
}
.geeks {
left : 40% ;
top : 40% ;
position : absolute ;
width : 300px ;
text-align : center ;
}
h 1 {
position : relative ;
}

Шаг 2: Второй шаг - создание верхней и правой границы.

  • Первым делом нужно создать границу с прозрачным фоном.
  • Затем анимируйте его при наведении курсора, дав ему линейную анимацию и имя идентификатора как animate.
  • Теперь, используя ключевые кадры, мы будем анимировать границу. Убедитесь, что вы применили цвет только к верхней и правой стороне границы. Во-первых, мы увеличили ширину анимации верхней границы и высоту анимации правой границы.
.geeks::before {
content : "" ;
position : absolute ;
top : -2px ;
left : -2px ;
width : 0 ;
height : 0 ;
background : transparent ;
border : 2px solid transparent ;
}
.geeks:hover::before {
animation: animate 1 s linear forwards;
}
@keyframes animate {
0% {
width : 0 ;
height : 0 ;
border-top-color : black ;
border-right-color : transparent ;
border-bottom-color : transparent ;
border-left-color : transparent ;
}
50% {
width : 100% ;
height : 0 ;
border-top-color : black ;
border-right-color : black ;
border-bottom-color : transparent ;
border-left-color : transparent ;
}
100% {
width : 100% ;
height : 100% ;
border-top-color : black ;
border-right-color : black ;
border-bottom-color : transparent ;
border-left-color : transparent ;
}
}

Шаг 3: Повторите шаг 2 с помощью селектора after. Вот некоторые ключевые моменты, которые следует помнить на этом этапе:

  • Убедитесь, что верх и правый край прозрачны, а левый и нижний - как цветные.
  • Слева высота увеличится, а ширина дна увеличится.
  • Обязательно используйте на этом этапе другое имя для идентификатора ключевых кадров.
.geeks::after {
content : "" ;
position : absolute ;
top : -2px ;
left : -2px ;
width : 0 ;
height : 0 ;
background : transparent ;
border : 2px solid transparent ;
}
.geeks:hover::after {
animation: animates s linear forwards; 1
}
@keyframes animates {
0% {
width : 0 ;
height : 0 ;
border-top-color : transparent ;
border-right-color : transparent ;
border-bottom-color : transparent ;
border-left-color : black ;
}
50% {
width : 0 ;
height : 100% ;
border-top-color : transparent ;
border-right-color : transparent ;
border-bottom-color : black ;
border-left-color : black ;
}
100% {
width : 100% ;
height : 100% ;
border-top-color : transparent ;
border-right-color : transparent ;
border-bottom-color : black ;
border-left-color : black ;
}
}

Полный код CSS:

<style>
body {
margin : 0 ;
padding : 0 ;
background : green ;
}
.geeks {
left : 40% ;
top : 40% ;
position : absolute ;
width : 300px ;
text-align : center ;
}
h 1 {
position : relative ;
}
.geeks::before {
content : "" ;
position : absolute ;
top : -2px ;
left : -2px ;
width : 0 ;
height : 0 ;
background : transparent ;
border : 2px solid transparent ;
}
.geeks:hover::before {
animation: animate 1 s linear forwards;
}
@keyframes animate {
0% {
width : 0 ;
height : 0 ;
border-top-color : black ;
border-right-color : transparent ;
border-bottom-color : transparent ;
border-left-color : transparent ;
}
50% {
width : 100% ;
height : 0 ;
border-top-color : black ;
border-right-color : black ;
border-bottom-color : transparent ;
border-left-color : transparent ;
}
100% {
width : 100% ;
height : 100% ;
border-top-color : black ;
border-right-color : black ;
border-bottom-color : transparent ;
border-left-color : transparent ;
}
}
.geeks::after {
content : "" ;
position : absolute ;
top : -2px ;
left : -2px ;
width : 0 ;
height : 0 ;
background : transparent ;
border : 2px solid transparent ;
}
.geeks:hover::after {
animation: animates s linear forwards; 1
}
@keyframes animates {
0% {
width : 0 ;
height : 0 ;
border-top-color : transparent ;
border-right-color : transparent ;
border-bottom-color : transparent ;
border-left-color : black ;
}
50% {
width : 0 ;
height : 100% ;
border-top-color : transparent ;
border-right-color : transparent ;
border-bottom-color : black ;
border-left-color : black ;
}
100% {
width : 100% ;
height : 100% ;
border-top-color : transparent ;
border-right-color : transparent ;
border-bottom-color : black ;
border-left-color : black ;
}
}
</style>

Полный код: это комбинация кодов HTML и CSS.

<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
< title >GeeksforGeeks</ title >
< style >
body {
margin: 0;
padding: 0;
background: green;
}
.geeks {
left: 40%;
top: 40%;
position: absolute;
width: 300px;
text-align: center;
}
h1 {
position: relative;
}
.geeks::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
background: transparent;
border: 2px solid transparent;
}
.geeks:hover::before {
animation: animate 1s linear forwards;
}
@keyframes animate {
0% {
width: 0;
height: 0;
border-top-color: black;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
50% {
width: 100%;
height: 0;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
100% {
width: 100%;
height: 100%;
border-top-color: black;
border-right-color: black;
border-bottom-color: transparent;
border-left-color: transparent;
}
}
.geeks::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
background: transparent;
border: 2px solid transparent;
}
.geeks:hover::after {
animation: animates 1s linear forwards;
}
@keyframes animates {
0% {
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: black;
}
50% {
width: 0;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
100% {
width: 100%;
height: 100%;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: black;
border-left-color: black;
}
}
</ style >
</ head >
< body >
< div class = "geeks" >
< h1 >GeeksforGeeks</ h1 >
</ div >
</ body >
</ html >

Выход: