Wie kann ich eine coole Link Animation umsetzen? (HTML & CSS)

von | Nov 21, 2023 | Allgemein | 0 Kommentare

Schlagwörter: CSS - HTML - Webdesign

Wir alle haben die Animationen schon gesehen die bei einem Mouse Hover startet (Mouse Hover ist ja der Zustand der herrscht wenn man mit der Maus über ein Element ist). Ich sehe die Frage auch heute noch täglich – wie man denn sowas machen kann. Ja selbst in WordPress wird das sehr oft gefragt. Viele denken das es absolut kompliziert ist. Dabei ists einfach ein a Zustand, a:after und ein a:hover Zustand.

In diesem kleinen Video möchte ich euch das mal kurz zeigen und genau erklären. Man sieht sehr schön dass man nur wenig Zeilen CSS einbauen muss und dann kann man da sehr viel an seine eigenen Wünsche und Ideen anpassen.

Video

HTML

1
2
3
4
5
6
7
    <nav>
        <a href="#">Home</a>
        <a href="#">Über mich</a>
        <a href="#">Links</a>
        <a href="#">Social Media</a>
        <a href="#">Kontakt</a>
    </nav>

CSS

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
nav{
    height: 100vh;
    width: 100vh;
    min-width: 600px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: auto;
}
a{
    position: relative;
    text-decoration: none;
    color: #a0a0a0;
    font-size: 25px;
    letter-spacing: 5px;
}
a:after{
    content: "";
    position: absolute;
    /*background-color: #edb059; /* 237,176,89 */
    background-color: rgba(237,176,89,1);
    transform: rotate(-10deg);
    height: 20px; /* wie hoch der strich */
    width: 0%; /* wie lange der strich */
    left: 0;
    bottom: -10px;
    transition: 300ms;
}
a:hover:after {
    width: 100%;   
}

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert