Šajā ekrānuzņēmumā mēs koncentrējamies uz līnijām, kas atrodas zem saitēm kājenes augšdaļā. Mēs kaut kā paklūpam, lai noskaidrotu, kurām lietām vajadzētu būt relatīvai pozīcijai un kurām nevajadzētu, lai mēs varētu iegūt šīs līnijas vajadzīgajā izmērā un pozīcijā.
Mēs krāsojam līniju ar gradientu, izmantojot vienkāršo fonu Compass @mixin.
Mēs nolemjam, ka saišu bloķēšana ir diezgan dīvaina, jo tas padara klikšķināmo zonu pārāk lielu. Es zinu, ka tā ir dīvaina lieta, jo parasti klikšķināmo zonu padarīšana par lielu ir laba, taču šajā gadījumā jūs varat noklikšķināt tik tālu no saites teksta, ka tas ir vienkārši dīvaini.
Jāatzīmē, ka galu galā kājenē pseido elementi, kas izveidoja līnijas, mainījās uz laidumiem. Tas ir tāpēc, ka es gribēju viņiem pievienot nedaudz animācijas uz kursora un lielākajā daļā pārlūkprogrammu pašlaik nevar izmantot pārejas vai animācijas uz pseido elementiem.
“Lāzera” animācija beidzās šādi (daži ligzdošanas veidi ir izlaisti):
a ( color: white; /* etc */ > span ( position: absolute; pointer-events: none; bottom: 0; width: 100%; height: 1px; margin-bottom: 3px; left: 0; @include background(linear-gradient(left, white, white 5%, rgba(white, 0.25) 5%, rgba(white, 0))); background-position: 100% 0; @include background-size(200% 0); @include transition(background 0s linear); ) &:hover, &:focus ( color: $orange; > span ( background-position: -100% 0; @include transition(background 0.4s); ) ) )