, wird oft verwendet, um HTML-Elemente zu gruppieren und sie dann mithilfe von CSS zu formatieren. Animation ist ein grafisches Element mit visuellen Effekten, um es attraktiver zu machen. In HTML und CSS nennen wir dieses Element normalerweise
. In diesem Artikel wird erklärt, wie CSS Animationen an Divisionselemente bindet.
Verwenden Sie die Keyframe-Methode, um die Animation zu definieren
Die Keyframe-Methode ist die gebräuchlichste Methode zum Erstellen von Animationseffekten in CSS.
Beispiel
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
width: 50vw;
height: 10vh;
background-color: rgb(103, 28, 141);
animation: myAnimation 2s infinite alternate;
}
@keyframes myAnimation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(200px);
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Die chinesische Übersetzung von
Erklärung
lautet:
Erklärung
HTML-Code verwendet das Divisionselement mit der Klasse „Container“ für Animationen. Die in der @keyframes-Regel definierte Animation verschiebt das Element in einer abwechselnden Schleife von 0 Pixel nach rechts auf 100 Pixel und dann nach rechts auf 200 Pixel.
Der CSS-Code definiert eine „Container“-Klasse mit einer Breite von 50 % des Ansichtsfensters, einer Höhe von 10 % des Ansichtsfensters und einer violetten Hintergrundfarbe. Wenden Sie die Animation auf das Element an, indem Sie die Eigenschaft „animation“ mit dem Wert „myAnimation 2s unendlich alternierend“ verwenden. Das div-Element ist im HTML-Text enthalten und die Animation wird angewendet, wenn es in einem Webbrowser angezeigt wird.
Beschneidungspfad verwenden
Wenn Sie das vorherige Beispiel verstehen, müssen Sie festgestellt haben, dass die Erstellung einer sehr komplexen Animation ziemlich schwierig ist, da wir so viele Codezeilen manuell schreiben müssen. Es gibt also viele weitere Tools, mit denen wir tolle Animationseffekte erzielen können. Ein Beispiel hierfür ist die Verwendung von Beschneidungspfaden.
clip-path ist eine CSS-Eigenschaft, mit der Sie einen bestimmten Bereich eines Elements angeben können, der angezeigt (beschnitten) werden soll, während der Rest des Elements ausgeblendet wird.
Wir können Bereiche durch Beschneidungspfade definieren, die mit Grundformen wie Kreisen, Rechtecken, Polygonen oder SVG-Pfaden erstellt werden können.
Beispiel
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: rgb(220, 221, 158);
width: 50vw;
padding: 20px;
text-align: justify;
border-radius: 20px;
clip-path: circle(23.2% at 100%);
}
.container:hover {
clip-path: circle(141% at 100%);
transition: 1s;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello world</h1>
<p>This is the body of the text</p>
</div>
</body>
</html>
Die chinesische Übersetzung von
Erklärung
lautet:
Erklärung
Hier verwendet das HTML-Dokument einen Flex-Container, um untergeordnete Elemente horizontal und vertikal zentriert anzuzeigen. Das Body-Element hat eine Höhe von 100 VH und die .container-Klasse verfügt über eine kreisförmige Schnittmaske und einen Hover-Übergangseffekt.
Die .container-Klasse verfügt über eine Hintergrundfarbe, Breite, Auffüllung und Textausrichtung, einen Rahmenradius von 20 Pixel und eine Clip-Pfad-Eigenschaft, die eine kreisförmige Maske erstellt. Die Hover-Pseudoklasse ändert die Größe des Clippfads mit einem 1-sekündigen Übergangseffekt.
Um dieses Thema weiter zu vertiefen, empfehlen wir Ihnen, das folgende Tutorial zu lesen, um mehr über das Thema zu erfahren -
https://www.tutorialspoint.com/css/css_clip.htm
Fazit
In diesem Artikel haben wir gelernt, wie man Animationen mithilfe von CSS an div-Elemente bindet. Wir werfen einen exklusiven Blick auf die Verwendung der Keyframe-Methode, um dasselbe zu erreichen. Wir können Animationseigenschaften wie Dauer, Verzögerung, Verhalten usw. anpassen.