JSFiddle - React, Tailwind, and code Playground

by philippkuehn

HTML

<a class="logo" href"#">
    <span class="logo-line logo-line-1"></span>
    <span class="logo-line logo-line-2"></span>
    <span class="logo-line logo-line-3"></span>
    <span class="logo-line logo-line-4"></span>
    <span class="logo-line logo-line-5"></span>
</a>

CSS

.logo {
    display: block;
    position: relative;
    width: 50px;
    height: 50px;
    background: transparent;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s ease-out, background 0.2s 0.1s ease-out, border-radius 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out, background 0.2s 0.1s ease-out, border-radius 0.3s ease-out;
    transition: transform 0.3s ease-out, background 0.2s 0.1s ease-out, border-radius 0.3s ease-out;
}

.logo:hover {
    border-radius: 50%;
    background: #000;
    -webkit-transform: rotate(-315deg) scale(0.75);
    -moz-transform: rotate(-315deg) scale(0.75);
    transform: rotate(-315deg) scale(0.75);
}

.logo-line {
    display: block;
    position: absolute;
    top: 0;
    width: 17%;
    background: #000;
    -webkit-transition: left 0.6s ease-out, top 0.6s ease-out, height 0.6s ease-out;
    -moz-transition: left 0.6s ease-out, top 0.6s ease-out, height 0.6s ease-out;
    transition: left 0.6s ease-out, top 0.6s ease-out, height 0.6s ease-out;
}

.logo-line-1 {
    height: 100%;
}

.logo-line-2 {
    left: 27.5%;
    height: 50%;
}

.logo-line-3 {
    left: 55%;
    height: 100%;
}

.logo-line-4 {
    top: 22%;
    left: 83%;
    height: 28%;
}

.logo-line-5 {
    top: 72%;
    left: 83%;
    height: 28%;
}

.logo:hover .logo-line {
    width: 25%;
}

.logo:hover .logo-line-2 {
    left: 25%;
    height: 100%;
}

.logo:hover .logo-line-3 {
    left: 50%;
}

.logo:hover .logo-line-4 {
    top: 0;
    left: 75%;
    height: 50%;
}

.logo:hover .logo-line-5 {
    top: 50%;
    left: 75%;
    height: 50%;
}