Heim > Artikel > Web-Frontend > Ein Beispiel für die Verwendung von CSS zur Implementierung eines Kreisbewegungsballs

Ein Beispiel für die Verwendung von CSS zur Implementierung eines Kreisbewegungsballs

黄舟Original: 2017-10-27 10:08:364175Durchsuche

Wir sehen oft einige Animationseffekte auf der Seite. Viele dieser Animationseffekte können nur durch CSS erreicht werden.

Hier verwenden wir das CSS3-Animations--Attribut . Das

animation-Attribut ist ein Kurzattribut zum Festlegen von sechs Animationsattributen:
animation-name gibt den Keyframe-Namen an, der an den Selektor gebunden werden muss.
animation-duration gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden.
animation-timing-function gibt die Geschwindigkeitskurve der Animation an.
animation-delay gibt die Verzögerung vor dem Start der Animation an.
animation-iteration-count gibt an, wie oft die Animation abgespielt werden soll.
animation-direction gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll.
Hinweis: Bitte geben Sie immer das Attribut „animation-duration“ an, andernfalls ist die Dauer 0 und die Animation wird nicht abgespielt.

animation: name duration timing-function delay iteration-count direction;

Zum Beispiel: ein kleiner Ball, der sich kreisförmig bewegt. Nachfolgend finden Sie den relevanten Code. Sie können darauf basierend entsprechende Änderungen vornehmen.

<!DOCTYPE html>
<html>
<head>
<title>CSS实现圆周运动小球</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type=&#39;text/css&#39;>
body{background:black;}
.class_ball
{
    width:8px;
    height:8px;
    background:#FFFFFF;
    border-radius:4px;
    box-shadow:0 0 7px #FFFFFF;
    left:200px;
    top:200px;
    position:absolute;
    -webkit-animation:action 2s linear infinite;
}
@-webkit-keyframes action
{
from{transform: rotate(0deg)  translate(58px) rotate(0deg);}
to{transform: rotate(360deg) translate(58px) rotate(-360deg);}
}
</style>
</head>
<body>
   <p class="class_ball"></p>
</body>
</html>

Das obige ist der detaillierte Inhalt vonEin Beispiel für die Verwendung von CSS zur Implementierung eines Kreisbewegungsballs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der Verwendung von Selektoren in CSSNächster Artikel：Zusammenfassung der Verwendung von Selektoren in CSS

In Verbindung stehende Artikel

Mehr sehen