Skip to content

Instantly share code, notes, and snippets.

@MrPawanMall

MrPawanMall/animated-border-effect-by-using-css.html

Last active May 29, 2023 03:57
Show Gist options
  • Save MrPawanMall/6a6ba1d3a2d1b01c5ce0d9264506fa2e to your computer and use it in GitHub Desktop.
Save MrPawanMall/6a6ba1d3a2d1b01c5ce0d9264506fa2e to your computer and use it in GitHub Desktop.
Download ZIP
Animated Border Effect by Using HTML, CSS and JavaScript
Raw
animated-border-effect-by-using-css.html
<!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