Pour faire une transition d’opacité, au survol par exemple, en css il faut:
a h1:hover,
a img:hover {
transition-duration: 0.5s;
opacity: 0.7;
filter: alpha(opacity=70);
}
Flèche de menu tournant de 180° + Déroulement en 1 seconde:
.etiquette::after{
content: »⬇︎ »;
color: rgba(255, 255, 255, .5);
font-size: 1.5rem;
position:absolute;
display:block;
top:-2px;
left: 7rem ;
transition: all 1s;
}
#case-a-cocher:checked ~ .etiquette::after{
transform: rotate(-180deg);
}
.liste-menu{
max-height: 0;
overflow: hidden;
transition: all 1s;
}
#case-a-cocher:checked ~ .liste-menu{
max-height: 100vh;
overflow: hidden;
}
Un autre:
.etiquette2::after{
content: »⬇︎ »;
color: rgba(255, 255, 255, .5);
font-size: 1.5rem;
position:absolute;
display:block;
top:1rem;
left: 6rem ;
transition: all 1s;
}
#case-a-cocher2:checked ~ .etiquette2::after{
transform: rotate(-180deg);
}
.liste-menu2{
max-height:0;
overflow:hidden;
position: absolute;
z-index:100;
background-color: rgb(63, 63, 116,.95);
top: 100%;
right:0;
transition: all 1s;
}
#case-a-cocher2:checked ~ .liste-menu2{
max-height: 100vh;
overflow:hidden;
}