Probiere diese Tutorials mit Dreamweaver aus
Moderne, responsive Web-Seiten gestalten
Animierte Webbuttons erstellen.
Lerne, wie du mit CSS Animationseffekte zu Buttons auf einer Web-Seite hinzufügen kannst.
Mit CSS-Transitions kannst du einfache, aber elegante animierte Übergangseffekte zu deiner Web-Seite hinzufügen. CSS-Transitions sind z. B. Animationen, die Usern Feedback bei der Navigation durch eine Website geben. Häufig verwendete Effekte sind Änderungen an Farbe, Rahmen und Größe eines Buttons oder des zugehörigen Textes. Auf den Abbildungen zu diesem Tutorial ist der jeweilige CSS-Code hervorgehoben, der für solche Animationen verwendet wird. Lade die Projektdateien herunter, um die Schritte in diesem Tutorial nachvollziehen und den vollständigen Code anzeigen zu können.
Was du benötigst
Beispieldateien herunterladen
ZIP, 9 KB
Dieses Tutorial zeigt nur einen Teil dessen, was du mit CSS-Transitions realisieren kannst. Lade die Projektdateien herunter, und gestalte Transitions nach deinen Vorstellungen.
Aufbau von CSS-Transitions.
Ein Übergangseffekt für ein Objekt, z. B. einen Button, erfordert zwei CSS-Stile – einen für den Normalzustand des Buttons und einen für den Zustand „hover“ (wenn der Cursor auf dem Objekt positioniert wird).
In diesem Beispiel wird der Normalzustand des Buttons durch einen CSS-ID-Selektor („#button1“) definiert. Der Button-Stil im Hover-Zustand ist als Pseudoselektor („#button1:hover“) für denselben Button definiert. Ein Pseudoselektor gibt den Stil für ein Element in einem bestimmten Zustand vor, z. B., wenn ein User auf einen Link klickt oder den Cursor darauf positioniert.
In diesem Fall ändert sich die Hintergrundfarbe von Blau in Rot. Dabei werden folgende vier Properties angewendet:
transition-property: die zu ändernde CSS-Property (Hintergrund).
transition-duration: die Dauer der Veränderung (0,3 Sekunden).
transition-timing-function: Geschwindigkeitsänderung im Zeitverlauf (Ease).
transition-delay: Zeitraum, nach dem der Übergang beginnt (0 Sekunden).
Vorbereitung.
Öffne die Datei create-animated-website-buttons.html in Dreamweaver. Zeige die CSS-Datei styles.css in der Ansicht „Teilen“ an.
Lege CSS-Stile fest, die die Farbe des Buttons von Blau in Rot ändern, sobald der User den Cursor darauf positioniert.
Für den Button im Normalzustand gibt die Property „background“ in der CSS-Anweisung die Farbe Blau vor. Die Transition-Property in derselben CSS-Regel gibt an, dass die Property „background“ sich ändert, sobald sich der Zustand des Buttons aufgrund einer Aktion verändert. Die übrigen Transition-Properties bestimmen, wie schnell und sanft die Änderung erfolgt.
Die Property „transition-timing-function: ease;“ lässt den Effekt langsam beginnen, schneller werden und gegen Ende wieder verlangsamen.
Der Pseudoselektor gibt vor, dass sich die Hintergrundfarbe des Buttons in Rot ändert, wenn der User den Cursor darauf positioniert und damit den Hover -Zustand auslöst.
CSS (Normalzustand).
#button1 {
...
background:#ADD7F4;
transition-property: background;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
CSS (Hover-Zustand).
#button1:hover {
background:#EA575B;
}
Definieren CSS-Stile, die die Farbe von Rahmen und Text des Buttons verändern.
Für den Button im Normalzustand geben die CSS-Property „border-color“ einen hellblauen Rahmen und die CSS-Property „color“ einen fast weißen Text vor. Die Transition-Property“ in derselben CSS-Regel gibt an, dass die Farb-Properties „border-color“ (für den Rahmen) und „color“ (für den Text) sich ändern, sobald sich der Zustand des Buttons aufgrund einer Aktion verändert. Die übrigen Transition-Properties bestimmen, wie schnell und sanft die Änderung erfolgt.
Die Property „transition-timing-function: linear;“ bestimmt, dass die Geschwindigkeit des Effekts über die gesamte Dauer gleich bleibt.
Der Pseudoselektor gibt vor, dass sich die Rahmenfarbe und die Textfarbe in Dunkelblau ändern, wenn der User den Cursor darauf positioniert und damit den Hover -Zustand auslöst.
CSS (Normalzustand).
#button2 {
...
border-color: #7A97B2;
color: #f4f4f4;
transition-property: border-color, color;
transition-duration: 0.1s;
transition-timing-function: linear;
transition-delay: 0;
}
CSS (Hover-Zustand).
button2:hover {
border-color: #204F81;
color: #183B61;
}
Lege CSS-Stile fest, die die Größe des Buttons verändern.
Für den Button im Normalzustand geben die Property „width“ eine Breite von 400px, die Property „height“ eine Höhe von 100px und die Property „line-height“ eine Zeilenhöhe von 60px vor. Die Transition-Property in derselben CSS-Regel gibt an, dass die Properties „width“, „height“ und „line-height“ sich ändern, sobald sich der Zustand des Buttons aufgrund einer Aktion verändert.
Der Pseudoselektor gibt an, dass die Werte für die Button-Properties „width“, „height“ und „height“ erhöht werden, wenn der User den Cursor darauf positioniert und damit den Hover -Zustand auslöst.
CSS (Normalzustand).
#button3 {
...
width: 400px;
height: 100px;
line-height: 60px;
transition-property:
width, height, line-height;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
}
CSS (Hover-Zustand).
#button3:hover {
width: 420px;
height: 120px;
line-height: 80px;
}
Definiere CSS-Stile, die die Farbe von Hintergrund und Text des Buttons verändern.
Für den Button im Normalzustand geben die CSS-Property „background-color“ einen fast weißen Farbton und die CSS-Property „color“ einen grauen Text vor. Die Transition-Property“ in derselben CSS-Regel gibt an, dass die Farb-Properties „background-color“ (für den Hintergrund) und „color“ (für den Text) sich ändern, sobald sich der Zustand des Buttons aufgrund einer Aktion verändert.
Der Pseudoselektor gibt vor, dass die Hintergrundfarbe und die Textfarbe ausgetauscht werden, wenn der User den Cursor darauf positioniert und damit den Hover -Zustand auslöst.
CSS (Normalzustand).
#button4 {
background-color:#f4f4f4;
color: #73746B;
transition-property:
background-color, color;
transition-duration: 0.2s;
transition-timing-function: ease;
transition-delay: 0;
}
CSS (Hover-Zustand).
#button4:hover {
background-color:#73746B;
color: #f4f4f4;
}
Klicke auf Vorschau in Browser. Überprüfe die Übergänge in deinem bevorzugten Webbrowser.
Speichere die Datei, damit deine Änderungen angezeigt werden.
