Split animation with single HTML element and CSS. Best viewed on PC.
A Pen by Gautam Singla on CodePen.
<!-- Reference CodePen --> | |
<!-- https://codepen.io/bosworthco/pen/RjBvgw --> | |
<!-- -------------------------- --> | |
<ul id="nav"> | |
<li class="nav-link"> | |
<h1 data-name="home">Home</h1> | |
</li> | |
<li class="nav-link"> | |
<h1 data-name="About">About</h1> | |
</li> | |
<li class="nav-link"> | |
<h1 data-name="services">services</h1> | |
</li> | |
<li class="nav-link"> | |
<h1 data-name="contact">contact</h1> | |
</li> | |
</ul> | |
<!-- ------------ --> | |
<!-- Social links --> | |
<aside class="_social-links"> | |
<ul class="_links-list"> | |
<li class="_social-link"><a href="https://twitter.com/ggsingla" target="_blank"><i class="fa-brands fa-twitter"></i></a></li> | |
<li class="_social-link"><a href="https://github.com/ggsingla" target="_blank"><i class="fa-brands fa-github"></i></a></li> | |
<li class="_social-link"><a href="mailto:ggsingla777@gmail.com" target="_blank"><i class="fa-solid fa-at"></i></a></li> | |
</ul> | |
</aside> | |
<!-- ------------ --> |
Split animation with single HTML element and CSS. Best viewed on PC.
A Pen by Gautam Singla on CodePen.
:root { | |
--bgcolor: rgb(2, 0, 36); | |
} | |
* { | |
margin: 0; | |
padding: 0; | |
font-family: sans-serif; | |
} | |
body { | |
min-height: 100vh; | |
display: grid; | |
place-items: center; | |
background: var(--bgcolor); | |
color: white; | |
} | |
ul { | |
list-style: none; | |
} | |
h1 { | |
font-size: 5rem; | |
position: relative; | |
text-transform: uppercase; | |
transition: all 300ms ease; | |
width: fit-content; | |
cursor: pointer; | |
} | |
h1:hover { | |
transform: skew(10deg); | |
} | |
h1::before { | |
content: attr(data-name); | |
position: absolute; | |
top: 0; | |
left: -20px; | |
background: var(--bgcolor); | |
height: 3rem; | |
overflow: hidden; | |
transition: all 300ms ease; | |
padding-left: 20px; | |
} | |
h1:hover::before { | |
top: -3px; | |
left: 0px; | |
color: hotpink; | |
} | |
h1::after { | |
content: ""; | |
height: 4px; | |
width: 0; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
background: hotpink; | |
transition: all 300ms ease; | |
} | |
h1:hover::after { | |
width: 120%; | |
outline: 5px solid rgb(2, 0, 36); | |
} | |
/* //////////////////////////// */ | |
/* links sidebar CSS */ | |
._social-links { | |
position: fixed; | |
right: 0; | |
top: 50%; | |
transform: translatey(-50%); | |
padding: 1em 0.5em 1em 1em; | |
background: #fafafa; | |
border-radius: 0.5em 0 0 0.5em; | |
box-shadow: -4px 0px 0px hotpink; | |
transition: all 300ms ease; | |
} | |
._social-links:hover { | |
box-shadow: -8px 0px 20px hotpink; | |
padding: 1em; | |
} | |
._links-list { | |
list-style: none; | |
display: flex; | |
flex-direction: column; | |
gap: 1em; | |
} | |
._social-link a { | |
color: #111; | |
font-size: 1.5rem; | |
transition: all 200ms ease; | |
} | |
._social-link a:visited { | |
color: #111; | |
} | |
._social-link a:hover { | |
color: hotpink; | |
font-size: 1.75rem; | |
} | |
/* //////////////////////////// */ |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" /> |