<!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
>