Animation d'un pseudo element

Version imprimable

1 pièce(s) jointe(s)

Bonsoir

Je realise le menu de ce site :

https://contrabureau.com/

Pièce jointe 637897

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:

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:

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.

27/04/2023, 13h53
PrincessLoiseau
Je ne sais pas trop de ce que vous souhaitez en final.

scaleX(0.0); et scaleX(1.0);
Code:

1 2 3 4 5 transform: scaleX(0.5); } .visible:hover{ transform: scaleX(1.5); }
28/04/2023, 20h55
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
28/04/2023, 22h41
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

Sur relecture de votre #1.

Code:

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:

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; }