Heim >Web-Frontend >CSS-Tutorial >Erstellen Sie eine Rahmenanimation mit CSS
Erstellen Sie eine Rahmenanimation mit CSS
- WBOYnach vorne
- 2023-09-08 08:57:091295Durchsuche
CSS wird verwendet, um schöne und ansprechende Randanimationen zu erstellen, die einer Webseite Bewegung und Interesse verleihen. Um eine Randanimation zu erstellen, müssen wir zunächst einen Rahmen für das Element definieren, das wir animieren möchten Verwenden Sie CSS-Übergänge und Animationen, um dem Rand Bewegung zu verleihen
Randanimationen können verwendet werden, um Hover-Effekte auf Schaltflächen, Links und anderen interaktiven Elementen zu erstellen. Sie können auch zum Erstellen von Ladeanimationen verwendet werden, die den Fortschritt anzeigen, während eine Seite oder ein Element geladen wird -Aktionstasten, um sie auffälliger zu machen.
Ansatz – 1
Wir erstellen einen Hover-Effekt, der den Rand eines Elements animiert, wenn ein Benutzer mit der Maus darüber fährt.
Algorithmus
Erstellen Sie ein HTML-Dokument und definieren Sie den Titel als „Hover-Effekt-Randanimation“.
Richten Sie den Hauptteil des Dokuments ein, verwenden Sie Flexbox, um die Box zu zentrieren, und geben Sie ihr eine Hintergrundfarbe von #48b6ff
Definieren Sie eine Box-Klasse mit Inline-Block-Anzeige, 10 Pixel Abstand, 18 Pixel Schriftgröße, Farbe #333 und einem 2 Pixel großen transparenten Vollrand. Die Übergangszeit beträgt 0,5 Sekunden und der Übergangseffekt ist einfach.
Fügen Sie dem Rand eine pulsierende Animation mit unendlicher Dauer und einfachem Ein-Aus-Timing hinzu. Blenden Sie den Rand von Rot über Grün zu Blau ein, wenn sich die Maus über dem Feld befindet, und deaktivieren Sie die pulsierende Animation
Definieren Sie die pulsierende Animation mit einem Keyframe, der die Rahmenfarbe von Rot über Grün zu Blau ändert. Fügen Sie dem Textkörper des HTML-Dokuments ein div-Element mit einer Box-Klasse hinzu
Speichern Sie die HTML-Datei und zeigen Sie sie in einem Webbrowser an, um die Randanimation des Hover-Effekts zu sehen.
Beispiel
lautet:Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Hover Effect Border Animation</title>
<style>
/* Set up the body with flexbox to center the box */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #48b6ff;
min-height: 100vh;
}
/* Style the box with a transparent border */
.box {
display: inline-block;
padding: 10px;
font-size: 18px;
color: #333;
border: 2px solid transparent;
transition: border 0.5s ease;
/* Add the pulsing animation to the border */
animation: border-pulse 2s ease-in-out infinite;
}
/* When the box is hovered, change the border to a gradient and disable the pulsing animation */
.box:hover {
border-image: linear-gradient(to right, #f00, #0f0, #00f);
border-image-slice: 1;
animation: none;
}
/* Define the pulsing animation */
@keyframes border-pulse {
0% {
border-color: #f00;
}
50% {
border-color: #0f0;
}
100% {
border-color: #00f;
}
}
</style>
</head>
<body>
<!-- Add the box element to the HTML -->
<div class="box">
Hover over me
</div>
</body>
</html>
Methode – 2
Hier erstellen wir eine Ladeanimation, indem wir den Rand des Ladesymbols animieren.
Algorithmus
Deklarieren Sie den Dokumenttyp als HTML mithilfe der 8b05045a5be5764f313ed5b9168a17e6-Deklaration.
Starten Sie das HTML-Dokument, indem Sie das 100db36a723c770d327fc0aef2ce13b1-Tag öffnen.
Fügen Sie das 93f0f5c25f18dab9d176bd4f6de5d30e-Tag innerhalb des 100db36a723c770d327fc0aef2ce13b1-Tags hinzu.
Fügen Sie im 93f0f5c25f18dab9d176bd4f6de5d30e-Tag ein b2386ffb911b14667cb8f0f91ea547a7-Tag hinzu und setzen Sie den Titel des Dokuments auf „Loading Border Animation“.
Fügen Sie ein c9ccee2e6ea535a969eb3f532ad9fe89-Tag innerhalb des 93f0f5c25f18dab9d176bd4f6de5d30e-Tags hinzu, um dem Dokument Stil hinzuzufügen.
Fügen Sie im c9ccee2e6ea535a969eb3f532ad9fe89-Tag CSS-Regeln hinzu, um das 6c04bd5ca3fcae76e30b72ad730ca86d-Element zu formatieren, einschließlich der Zentrierung der Ladeanimation und der Festlegung der Hintergrundfarbe.
Fügen Sie eine CSS-Regel hinzu, um die Ladeanimation zu gestalten, indem Sie deren Größe, Form, Rahmenfarbe und Animationseigenschaften festlegen.
Erstellen Sie mithilfe der @keyframes-Regel eine Animation mit dem Namen „spin“.
Fügen Sie die Transformationsregel hinzu, um das Element um 360 Grad zu drehen.
Fügen Sie im 6c04bd5ca3fcae76e30b72ad730ca86d-Tag ein dc6dce4a544fdca2df29d5ac0ea9906b-Element mit der Klasse „loading“ hinzu, um die Ladeanimation anzuzeigen.
Beispiel
lautet:Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Loading Border Animation</title>
<style>
/* Styling the body element to center the loading animation */
body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: rgb(253, 114, 114);
}
/* Styling the loading element */
.loading {
width: 50px;
height: 50px;
border: 5px solid #ccc;
border-top-color: #3498db; /* Changing the top border color */
border-radius: 50%; /* Making the border round */
animation: spin 1s linear infinite; /* Adding animation to spin continuously */
margin: 50px auto; /* Centering the element with margin */
}
/* Defining the animation */
@keyframes spin {
to {
transform: rotate(360deg); /* Rotating the element 360 degrees */
}
}
</style>
</head>
<body>
<div class="loading"></div> <!-- The loading element -->
</body>
</html>
Ansatz – 3
Wir werden CSS verwenden, um eine Rahmenanimation auf die Call-to-Action-Schaltfläche anzuwenden.
Algorithmus
Erstellen Sie einen Behälter und zentrieren Sie ihn.
Stilen Sie das Element mit einem anfänglich transparenten Rand und Übergangseigenschaften, um den Rand in 0,5 Sekunden zu animieren.
Erstellen Sie einen Hover-Effekt für das Element, der den Rand in einen linearen Farbverlauf mit drei Farben ändert: Rot, Grün und Blau.
Definieren Sie eine Keyframe-Animation namens „border-pulse“, um die Rahmenfarbe eines Elements im Laufe der Zeit zu ändern.
Wenden Sie eine „Border-Pulse“-Animation auf den Anfangszustand des Elements an.
Wenn Sie mit der Maus über das Element fahren, deaktivieren Sie die „Border-Pulse“-Animation, indem Sie sie auf „none“ setzen.
Beispiel
lautet:Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Call to Action Border Animation</title>
<style>
/* Set the background color and center content vertically */
body {
background-color: #48b6ff;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}
/* Style the button */
.cta-button {
display: inline-block;
position: relative;
padding: 16px 32px;
background-color: #ff4d4d;
color: #fff;
font-size: 24px;
text-transform: uppercase;
text-decoration: none;
border: none;
overflow: hidden;
transition: all 0.4s ease-out;
}
/* Add a pseudo-element to create the border animation */
.cta-button:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 100%;
background-color: #fff;
transform: translateX(-50%);
z-index: -1;
transition: all 0.4s ease-out;
}
/* Change the background and text color on hover */
.cta-button:hover {
background-color: #fff;
color: #ff4d4d;
}
/* Animate the pseudo-element to create the border animation */
.cta-button:hover:before {
width: 110%;
}
</style>
</head>
<body>
<a href="#" class="cta-button">Click Me</a>
</body>
</html>
Fazit
Allerdings können Randanimationen manchmal zu Leistungsproblemen führen, insbesondere wenn sie übermäßig verwendet oder auf große Elemente angewendet werden, was zu langsameren Seitenladezeiten und einer geringeren Gesamtleistung führt. Einige ältere Webbrowser unterstützen möglicherweise bestimmte Animationstechniken nicht.
Wir können auch Rahmenanimationen mit SVG-Grafiken und JavaScript erstellen. Sie ermöglichen komplexere Animationen und bieten mehr Kontrolle über Animationen.
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Rahmenanimation mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!