10 replies

Animation on Navigation Bar

Hi guys, I am trying to create an animation similar to the one Kevin Powell made (refer to the attached picture). However, the issue is that I am unable to replicate it exactly because it's in my navigation bar and not a simple rectangle. Additionally, I would like to implement a diagonal animation, as shown in the attached paint picture. Could you please assist me with this?

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <title>Critiques et Évaluations | Call of Duty</title>
</head>

<body>

    <header>
        <img src="img/Call-of-Duty-Logo.png" alt="Call-of-Duty-Logo-Accueil">
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="evaluation.html">Évalutation</a></li>
                <li><a href="#">Critiques</a></li>
                <li><a href="#">Nos Réseaux Sociaux</a></li>
                <li><a href="#">Nous Contacter</a></li>
            </ul>
        </nav>
    </header>

    <div class="nav">

    </div>

</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <title>Critiques et Évaluations | Call of Duty</title>
</head>

<body>

    <header>
        <img src="img/Call-of-Duty-Logo.png" alt="Call-of-Duty-Logo-Accueil">
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="evaluation.html">Évalutation</a></li>
                <li><a href="#">Critiques</a></li>
                <li><a href="#">Nos Réseaux Sociaux</a></li>
                <li><a href="#">Nous Contacter</a></li>
            </ul>
        </nav>
    </header>

    <div class="nav">

    </div>

</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <title>Critiques et Évaluations | Call of Duty</title>
</head>

<body>

    <header>
        <img src="img/Call-of-Duty-Logo.png" alt="Call-of-Duty-Logo-Accueil">
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="evaluation.html">Évalutation</a></li>
                <li><a href="#">Critiques</a></li>
                <li><a href="#">Nos Réseaux Sociaux</a></li>
                <li><a href="#">Nous Contacter</a></li>
            </ul>
        </nav>
    </header>

    <div class="nav">

    </div>

</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <title>Critiques et Évaluations | Call of Duty</title>
</head>

<body>

    <header>
        <img src="img/Call-of-Duty-Logo.png" alt="Call-of-Duty-Logo-Accueil">
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="evaluation.html">Évalutation</a></li>
                <li><a href="#">Critiques</a></li>
                <li><a href="#">Nos Réseaux Sociaux</a></li>
                <li><a href="#">Nous Contacter</a></li>
            </ul>
        </nav>
    </header>

    <div class="nav">

    </div>

</body>

</html>

Animation on Navigation Bar

Similar Threads

Similar Threads

Similar Threads