Discussion :

[labarre2002]

Bonsoir

Je realise le menu de ce site :

https://contrabureau.com/



le soucis est que lorsque j essaie d animer la ligne en dessous de chaque lien il ne se passe rien

mon code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  <nav>
            <ul>
 
             <li class="first visible"> 
                <div style=" background-image: url('assets/burger.jpg');"></div>
                 <span>01</span> 
                 <a href="#"> <h1>burger</h1></a> 
                </li>
             <li class="two  visible">
                <div style=" background-image: url('assets/sandwich.jpg');"></div>
                <span>02</span> 
                <a href="#"><h1>sandwich</h1></a>
             </li>
             <li class="three  visible">
                <div style=" background-image: url('assets/salade.jpg');"></div>
                <span>03</span>
                 <a href="#"><h1>salade</h1></a>  
                </li>
             <li class="four visible ">
                <div style=" background-image: url('assets/drink.jpg');"></div>
                <span>04</span> 
                <a href="#"><h1>boissons</h1></a> 
            </li>
             <li class="five  visible">
                <div style=" background-image: url('assets/pasta.jpg');"></div>
                <span>05</span>
                 <a href="#"><h1>pates</h1></a>  
                </li>
 
           </ul>
 
</nav>

mon code CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
li{
    width: 100vw;
    height:15vw;
    display:flex;
    align-items: flex-start;
    padding-left: 95px;
    position: relative;
    overflow: hidden;
}
 
li:before{
 
    content: "";
    position: absolute;
    height: .2vw;
    background-color: #c92d1f;
    left: 0;
    width: 100%;
    bottom: 0;
    transform: scaleX(0);
    transition: transform 1s ease-out;
    transform-origin: left;
}
 
.visible:before{
    transform: scaleX(1);
}

en espérant avoir une réponse constructive.
Merci.

[PrincessLoiseau]

Je ne sais pas trop de ce que vous souhaitez en final.

scaleX(0.0); et scaleX(1.0);

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
transform: scaleX(0.5);
}
.visible:hover{
    transform: scaleX(1.5);
}

[labarre2002]

Bonsoir

si tu prends la peine de cliquer sur le lien du site tu vas comprendre.
tu remarquera que en chargeant la page les bordures en dessous des liens
s animent de la gauche vers la droite.

Le scale opere sur les images en background dans les liens

[PrincessLoiseau]

Je n'ai pris aucune "peine" à cliquer sur ... " le lien du site tu vas comprendre"

Ce qui est sur, c'est que entre les images et la description que vous présentez au #1 et vos liens footer avec ^^les bordures en dessous^^ des liens gauche droite en #3. ?

Vous réalisez le menu de ce site -> copié coller

[PrincessLoiseau]

Sur relecture de votre #1.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<ul>
         <li class="first visible">
            <span>01</span> 
            <a href="#"><h1>burger</h1></a> 
            <div class="effect">
                <div class="img"></div>
                <div class="line"></div>
            </div> 
        </li>
       </ul>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
li{ display:flex; position: relative;
    width: 100vw; height:15vw; padding-left: 95px; }
 
li:hover > .effect {
    width: 100%; transition-property: width; transition-duration: 0.6s; }
 
.effect { position: absolute; top:0; left:0;  z-index: -1; width: 0%; height: 100%; }
.effect > .img { width: 100%; height: 98%; background-image: url('assets/burger.jpg'); background-size: 100% 100%; }
.effect > .line { width: 100%; height: 2%; background-color: #c92d1f; }