Animierte Unterstreichung in Menüleiste
Verfasst: Mo 4. Jul 2022, 10:00
ich habe heute diese kleine Animation bei "hover" (Mausüber) an den Links der Menüleiste eingefügt. Vielleicht kann das mal jemand gebrauchen.
https://www.mobirise-tutorials.com/SuperfoodM5/
Diese Class habe ich an jeden Link der Navi mit ran geschrieben (siehe Screenshot):
class="hover-underline-animation"
Diese CSS habe ich zusätzlich in denb Bereich "CSS Editor" vom "Code Editor" des Menüblocks kopiert:
https://www.mobirise-tutorials.com/SuperfoodM5/
Diese Class habe ich an jeden Link der Navi mit ran geschrieben (siehe Screenshot):
class="hover-underline-animation"
Diese CSS habe ich zusätzlich in denb Bereich "CSS Editor" vom "Code Editor" des Menüblocks kopiert:
Code: Alles auswählen
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
