LOGO BUILDING - HTML AND CSS EFFECT

gistfile1.txt

/* ------------ MARK-UP BELOW -------*/

<div class="db-container">
    <div class="db-a">A</div>
    <div class="db-b">B</div>
    <div class="db-c">C</div>
    <div class="db-d">D</div>
</div>

/* ----------- CSS BELOW ---------- */
/* MAKE CONTAINER FLEX SET WIDTH TO SUIT CONTENT AND STYLE */
.db-container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 25%;
    justify-content: flex-start;
    transition: all 0.5s;
    font-size: 72px;
    font-weight: bold;
    color: black;
}

/* CREATE PSEUDO BEHIND CONTAINER FOR BORDER LINE, STYLE AND SET MAX WIDTH */
.db-container::before {
    position: absolute; 
    content: ' ';
    width: 80%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0);
    border-bottom: 8px solid #000;
    transition: all 1s;
    transition-delay: 0.1s;
}

/* SET TRANSITION TIMES FOR B C AND D */
.db-b {
    transition: all 0.5s;
}

.db-c {
    transition: all 0.75s;
}

.db-d {
    transition: all 1s;
}

/* SET NOT HOVER STATES - THIS IS HOW THEY WILL BE BEFORE HOVERING */

.db-container:not(:hover)::before {
    transition: 0.25s;
    width: 20%;
}

.db-container:not(:hover) .db-b {
    opacity: 0;
    transition: 1s;
    transform: translateY(50%) rotate(10deg);
}

.db-container:not(:hover) .db-c {
    opacity: 0;
    transition: 0.75s;
    transform: translateY(60%) rotate(12deg);
}

.db-container:not(:hover) .db-d {
    opacity: 0;
    transition: 0.5s;
    transform: translateY(70%) rotate(15deg);
}