<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>
        <span>L</span><span>e</span><span>a</span><span>r</span><span>n</span><span class="darker">&nbsp;</span><span>C</span><span>S</span><span>S</span><span class="darker">&nbsp;</span><span>G</span><span>r</span><span>i</span><span>d</span>
    </h1>
</body>

</html>
h1 {
    margin-top: 100px;
    display: grid;
    text-transform: uppercase;
    grid-template-columns: repeat(8, 3rem);
    grid-auto-rows: 3rem;
    justify-content: center;
    grid-gap: 0.3rem;

    &:hover span:nth-child(1) {
        transform: translateX(200px) translateY(200px) rotate(-45deg);
    }

    &:hover span:nth-child(2) {
        transform: translateX(-300px) translateY(10px) rotate(-45deg);
    }

    &:hover span:nth-child(3) {
        transform: translateX(150px) translateY(-100px) rotate(-45deg);
    }

    &:hover span:nth-child(4) {
        transform: translateX(150px) translateY(100px) rotate(-25deg);
    }

    &:hover span:nth-child(5) {
        transform: translateX(300px) translateY(40px) rotate(-25deg);
    }

    &:hover span:nth-child(6) {
        transform: translateX(-300px) translateY(240px) rotate(45deg);
    }

    &:hover span:nth-child(7) {
        transform: translateX(400px) translateY(-140px) rotate(45deg);
    }

    &:hover span:nth-child(8) {
        transform: translateX(100px) translateY(-80px) rotate(-25deg);
    }

    &:hover span:nth-child(9) {
        transform: translateX(110px) translateY(80px) rotate(-25deg);
    }

    &:hover span:nth-child(10) {
        transform: translateX(250px) translateY(80px) rotate(35deg);
    }

    &:hover span:nth-child(11) {
        transform: translateX(-250px) translateY(-120px) rotate(35deg);
    }

    &:hover span:nth-child(12) {
        transform: translateX(-200px) translateY(-80px) rotate(15deg);
    }

    &:hover span:nth-child(13) {
        transform: translateX(-180px) translateY(160px) rotate(-15deg);
    }

    &:hover span:nth-child(14) {
        transform: translateX(-220px) translateY(20px) rotate(-15deg);
    }

    > span {
        transition: transform 0.5s;
        background-color: #fdd834;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0.15rem 0 #ff8f00;
        border-radius: 0.2rem;

        &:nth-child(6) {
            grid-column: 3 span;
        }

        &.darker {
            background-color: #fdc107;
        }
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.