Trick # 446 | Dieser Beitrag beinhaltet 531 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Ein Trick, der sich ganz besonders für Buttons eignet, auf welche Sie die Aufmerksamkeit lenken möchten: Der Shake-Effekt. Ganz einfach zu machen – wir zeigen Ihnen wie.
Der Hack funktioniert mit allen Modulen des Divi-Themes – ist aber am sinnvollsten bei einem Button.
Platzieren Sie ein solches Button-Modul auf Ihrer Website, füllen Sie den gewünschten Text und die Link-URL ein und vergeben Sie dem Modul die CSS-Klasse «wobble». Diese Klasse können Sie im Tab «Erweitert» unter «CSS-ID und Klassen» im Textfeld «CSS-Klasse» eintragen.
Nun kopieren Sie den nachfolgenden CSS-Code und fügen ihn dem CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) hinzu:
.wobble {
-webkit-animation: wobble 4s both infinite;
animation: wobble 4s both infinite;
text-align: center;
}@keyframes wobble {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
-webkit-transform-origin: 50%50%;
transform-origin: 50%50%;
}
7.5% {
-webkit-transform: translateX(-30px)rotate(-6deg);
transform: translateX(-30px)rotate(-6deg);
}
15% {
-webkit-transform: translateX(15px)rotate(6deg);
transform: translateX(15px)rotate(6deg);
}
22.5% {
-webkit-transform: translateX(-15px)rotate(-3.6deg);
transform: translateX(-15px)rotate(-3.6deg);
}
30% {
-webkit-transform: translateX(9px)rotate(2.4deg);
transform: translateX(9px)rotate(2.4deg);
}
37.5% {
-webkit-transform: translateX(-6px)rotate(-1.2deg);
transform: translateX(-6px)rotate(-1.2deg);
}
100% {
-webkit-transform: translateX(-6px)rotate(0deg);
transform: translateX(-6px)rotate(0deg);
}
}Der Button verhält sich nun so:
Falls Sie den Button nur einmal durchrütteln möchten und er dann statisch erscheinen soll, lassen Sie einfach in den Zeilen 2 und 3 des Codes den Eintrag infinite weg.
Werbung
Werbung
