index.html

<!DOCTYPE html>
<html lang="tr">

<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">
    <link rel="stylesheet" href="main.css">
    <title>Menü Animasyonu</title>
</head>

<body>

    <ul>
        <li style="--clr:#00ade1">
            <a href="#" data-text="&nbsp;Ahmet">&nbsp;ahmet&nbsp;</a>
        </li>
        <li style="--clr:#ff6492">
            <a href="#" data-text="&nbsp;Yasir">&nbsp;Yasir&nbsp;</a>
        </li>
        <li style="--clr:#ffdd1c">
            <a href="#" data-text="&nbsp;ÖZCAN">&nbsp;ÖZCAN&nbsp;</a>
        </li>
        <li style="--clr:#00dc82">
            <a href="#" data-text="&nbsp;Web">&nbsp;Web&nbsp;</a>
        </li>
        <li style="--clr:#dc00d4">
            <a href="#" data-text="&nbsp;Developer">&nbsp;Developer&nbsp;</a>
        </li>
    </ul>

</body>

</html>