/animated-border-effect-by-using-css.html
Last active Oct 4, 2019
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