Animated Border Effect by Using HTML, CSS and JavaScript
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Animated Border Effect by Using HTML, CSS and JavaScript </title> | |
<style> | |
:root { | |
--img: linear-gradient(120deg, rgba(43, 62, 1, 0.82) 0%, rgba(12, 93, 23, 0.69) 100%), url(https://lh3.ggpht.com/p/AF1QipPMMGScLxelev5oVEp34fh8AJerF40vWMaMFuk=s512); | |
--br: linear-gradient(to top, #96fbc4 0%, #f9f586 100%); | |
--bb: linear-gradient(to top, #37ecba 0%, #72afd3 100%); | |
--bl: linear-gradient(to top, #c471f5 0%, #fa71cd 100%); | |
--bt: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%); | |
--p: 20px; | |
--bw: 2px; | |
--t: 1s; | |
--td: 200ms; | |
--te: ease-out; | |
} | |
body { | |
height: 100vh; | |
display: flex; | |
background-color: darkslategray; | |
} | |
.banner { | |
--w: 720px; | |
--h: 200px; | |
max-width: var(--w); | |
width: 100%; | |
margin: auto; | |
height: var(--h); | |
background-image: var(--img); | |
background-size: var(--w); | |
background-repeat: no-repeat; | |
background-position: center; | |
transition: background-size var(--t); | |
position: relative; | |
box-shadow: 0px 30px 30px -20px rgba(0, 0, 0, 0.45); | |
} | |
.banner .inner { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 100%; | |
} | |
.banner .inner > h1 { | |
position: relative; | |
font-family: serif; | |
color: white; | |
letter-spacing: .4em; | |
text-transform: uppercase; | |
font-size: 1em; | |
transition: var(--td); | |
} | |
@media (min-width: 480px) { | |
.banner .inner > h1 { | |
font-size: 2em; | |
} | |
} | |
@media (min-width: 768px) { | |
.banner .inner > h1 { | |
font-size: 3em; | |
} | |
} | |
.banner .inner::before, | |
.banner .inner::after, .banner::after, .banner::before { | |
content: ''; | |
position: absolute; | |
} | |
.banner::before { | |
top: var(--p); | |
right: var(--p); | |
height: 0; | |
width: var(--bw); | |
background-image: var(--br); | |
transition: height var(--td) var(--te) 0.75s; | |
} | |
.banner::after { | |
bottom: var(--p); | |
right: var(--p); | |
width: 0; | |
height: var(--bw); | |
background-image: var(--bb); | |
transition: width var(--td) var(--te) 0.5s; | |
} | |
.banner .inner::before { | |
bottom: var(--p); | |
left: var(--p); | |
height: 0; | |
width: var(--bw); | |
background-image: var(--bl); | |
transition: height var(--td) var(--te) 0.25s; | |
} | |
.banner .inner::after { | |
top: var(--p); | |
left: var(--p); | |
height: var(--bw); | |
width: 0; | |
background-image: var(--bt); | |
transition: width var(--td) var(--te) 0s; | |
} | |
.banner:hover::before { | |
height: calc(var(--h) - var(--p) * 2); | |
transition: height var(--td) var(--te) 0s; | |
} | |
.banner:hover::after { | |
width: calc(100% - var(--p) * 2); | |
transition: width var(--td) var(--te) 0.25s; | |
} | |
.banner:hover .inner::before { | |
height: calc(var(--h) - var(--p) * 2); | |
transition: height var(--td) var(--te) 0.5s; | |
} | |
.banner:hover .inner::after { | |
width: calc(100% - var(--p) * 2); | |
transition: width var(--td) var(--te) 0.75s; | |
} | |
@media (min-width: 768px) { | |
.banner:hover { | |
background-size: 760px; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="banner"> | |
<div class="inner"> | |
<h1>Pawan Mall</h1> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment