Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;}
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        overflow: hidden;
        background: #ffffff;
      }
      ul {
        position: relative;
      }
      ul li {
        list-style: none;
        text-align: center;
      }
      ul li a {
        color: #000000;
        text-decoration: none;
        font-size: 2.5em;
        padding: 5px 22px;
        display: inline-flex;
        font-weight: 700;
        transition: 1s;
      }
      ul li a:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 40%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 5em;
        color: rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        z-index: -1;
        opacity: 0;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 500px;
        transition: letter-spacing 0.5s, left 5s;
      }
      ul li a:hover:before {
        content: attr(data-text);
        opacity: 1;
        left: 50%;
        letter-spacing: 10px;
        width: 1800px;
        height: 1800px;
      }
      ul li:nth-child(6n + 1) a:before {
        background: #0470fe;
      }
      ul li:nth-child(6n + 2) a:before {
        background: #ff7675;
      }
      ul li:nth-child(6n + 3) a:before {
        background: #1582fe;
      }
      ul li:nth-child(6n + 4) a:before {
        background: #a29bfe;
      }
      ul li:nth-child(6n + 5) a:before {
        background: #fd79a8;
      }
      ul li:nth-child(6n + 6) a:before {
        background: #ffeaa7;
      }
      </style>
</head>
<body>
    <ul>
        <li><a data-text="Supriya">Supriya</a></li>
        <li><a data-text="Baby">Baby</a></li>
        <li><a data-text="Love">Love</a></li>
        <li><a data-text="You">You</a></li>
        <li><a data-text="So">So</a></li>
        <li><a data-text="Much">Much</a></li>
      </ul>
</body>
</html>
Editor is loading...