Diese einfache Demo erklärt, wie Sie CSS-Animationen für interessante visuelle Effekte verwenden.
Das Hinzufügen eines animierten Hintergrunds zu Ihrer Website oder Anwendung kann zu einem einzigartigen, interessanten Design beitragen. Kreative Hintergründe können Emotionen hervorrufen und das Benutzererlebnis verbessern.
Es gibt viele Möglichkeiten, einen animierten Hintergrund für Ihre Anwendung zu erstellen, aber eine einfache Kombination aus einfachem HTML und CSS funktioniert besonders gut. Schauen Sie sich dieses Beispiel an, erfahren Sie, wie der Code funktioniert, und sehen Sie sich eine Live-Demo des endgültigen animierten Hintergrunds an.
Erstellen Sie die HTML-Struktur
Sie erstellen einen blauen Hintergrund mit Blasen, die wachsen und nach oben schweben. Das Endergebnis können Sie hier sehen Codepen.
Beginnen Sie mit der Erstellung eines Abschnitt mit der Klasse Verpackung um die Animation unterzubringen.
Erstellen Sie dann 10 Divs, die die Blasen darstellen. Erstellen Sie in jedem Div eine Spanne mit der Klasse
Punkt. Du kannst Lernen Sie diese wichtigen HTML-Tags in 10 Minuten wenn Sie HTML-Neuling sind.<body>
<sectionclass="wrapper">
<h1>Animated Backgroundh1>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
section>
body>Stil mit CSS-Code
Du kannst Unglaubliches erschaffen Hintergrundeffekte nur mit HTML. Für dieses Projekt verwenden Sie jedoch CSS, um den Hintergrund zu gestalten und zu animieren.
Stellen Sie zunächst den Rand und den Abstand auf 0 ein, um sicherzustellen, dass um den Hintergrund keine Leerzeichen entstehen.
* {
margin: 0;
padding: 0;
}Gestalten Sie dann den übergeordneten Abschnitt mithilfe der Wrapper-Klasse. Dieser Abschnitt hat eine Breite und Höhe von 100 %, sodass er die gesamte Seite ausfüllt. Legen Sie als Hintergrundfarbe einen Blauton fest und geben Sie ihm eine absolute Position.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}Gestalten Sie den H1 auch mit einer absoluten Position. Um es in der Mitte der Seite zu platzieren, stellen Sie zunächst die Position oben links auf 50 % ein. Verwenden Sie dann „Übersetzen“, um es nach oben und links zu verschieben, sodass sein Mittelpunkt genau in der Mitte liegt.
.wrapperh1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}Als nächstes gestalten Sie die Divs, die kreisförmig sein sollen, so dass sie als animierte Blasen fungieren. Geben Sie jedem Div eine Höhe, Breite und einen Rand. Der große Randradius sorgt dafür, dass der Rand kreisförmig ist. Legen Sie außerdem mithilfe der CSS-Animationseigenschaft eine Animationsdauer fest.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}Gestalten Sie die Punkte mit einer Höhe und Breite von 5 Pixeln. Geben Sie den Punkten einen Randradius und einen weißen Hintergrund. Positionieren Sie jedes Element absolut, nahe der oberen rechten Ecke des übergeordneten Divs.
div.dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}Als nächstes verwenden Sie den Selektor für das n-te Kind, um jedes Div mit unterschiedlichen Einstellungen zu positionieren. Sie können die Animation benennen animieren; Sie definieren es später mit @keyframes.
Verwenden n-tes Kind (2) um das erste anzusprechen div seit dem ersten Kind des .Verpackung Element ist das h1.
.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3slinearinfinite;
}.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}
Sie können den unteren Divs höhere Prozentsätze zuweisen, sodass sie in unterschiedlichen Abständen an die Spitze gelangen.
.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}
Verwenden Sie @keyframes, um die Kreise und Punkte in unterschiedlichen Abständen schrittweise zu ändern und zu drehen. Im folgenden Code drehen sich die Punkte um 70 Grad und die Kreise um 360. Durch diese Drehung entsteht der Blaseneffekt.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}Du kannst Machen Sie Hintergründe mithilfe von CSS-Mustern stilvoller. Mit Mustern können Sie Wellen, Gitter, Blätter und andere Muster erstellen, um erstaunliche Animationen zu erstellen.
Sie können viele Eigenschaften mit CSS animieren
Mit CSS können Sie verschiedene Arten von Animationen erstellen. Dazu gehören das Ändern der Hintergrundfarbe und das Verzögern der Laufzeit einer Animation.
Sie können auch festlegen, wie oft eine Animation ausgeführt werden soll, sogar bis ins Unendliche. Sie können auch die Richtung festlegen, in die sich die Animation bewegen soll: vorwärts oder rückwärts. Es macht Spaß, mit Animationen herumzuspielen, und Sie können damit Ihre Anwendungen zum Leben erwecken.
