So implementieren Sie Rotations- und Bewegungsanimationseffekte in CSS3-CSS-Kenntnisse-php.cn

So implementieren Sie Rotations- und Bewegungsanimationseffekte in CSS3

藏色散人

Freigeben： 2019-11-30 16:38:37

Original

8394 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich die Methode zum Realisieren von Rotationseffekten mit CSS3-Animation vor.

CSS ist ein kaskadierendes Stylesheet, und Freunde, die Front-End lernen, müssen damit sehr vertraut sein. Nun, jeder sollte wissen, dass ein cooler Animationseffekt Ihrer Website ein anspruchsvolleres Aussehen verleihen und den Inhalt bereichern kann, um Benutzer anzulocken.

Jetzt stellen wir Ihnen einen einfachen und interessanten Animationsspezialeffekt vor, der den Bildrotationseffekt erzielen soll. Die Wirkung von

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css3实现旋转移动动画特效</title>
<head>
    <style>
.main{
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    border-radius: 20px;
    background: red;
    position: relative;
    top: 30px;
    animation: asd 5s;
}
        @keyframes asd {
            0 %{transform: rotate(0deg);}
            25%{transform: rotate(60deg);left: 0px;}
            50%{left:500px;}
            75%{transform: rotate(-520deg);}
            100%{transform: rotate(0deg);left: 0px;}
        }
 </style>
</head>
<body>

<div class="main">
    动画
</div>
</body>
</html>

Nach dem Login kopieren

ist wie folgt:

So implementieren Sie Rotations- und Bewegungsanimationseffekte in CSS3

Einführung in relevante wichtige Attribute in CSS3:

Transformation:

Das Transformationsattribut bedeutet die Anwendung einer 2D- oder 3D-Transformation auf das Element, die das Element drehen, skalieren, verschieben oder neigen kann.

@keyframes:

Mit @keyframes-Regeln können Sie Animationen erstellen. Mit anderen Worten: @keyframes werden hier nur zur Definition von Animationen verwendet und haben keine eigentliche Bedeutung.

Das Implementierungsprinzip der CSS-Animation besteht darin, schrittweise von einem CSS-Stil zu einem anderen CSS-Stil zu wechseln.

Es gibt den Zeitpunkt an, zu dem die Änderung in Prozent erfolgt (oder „von“ und „bis“). (0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation.)

Solange Sie die Prinzipien der CSS-Animation beherrschen, ist es sehr einfach, die coolsten Effekte durch reines CSS zu erzielen.

Dieser Artikel ist eine Einführung in die spezifische Methode zum Erzielen von Rotations- und Bewegungseffekten in CSS3-Animationen. Er ist einfach und leicht zu verstehen. Ich hoffe, er wird für Freunde in Not hilfreich sein.

Weitere coole CSS3-, HTML5- und Javascript-Spezialeffektcodes finden Sie unter: Javascript Special Effects Encyclopedia

Wenn Sie mehr über Front-End erfahren möchten Verwandtes Wissen: Sie können der PHP-Chinese-Website CSS3-Video-Tutorial, CSS-Video-Tutorial, Bootstrap-Tutorial und anderen verwandten Tutorials folgen. Jeder ist herzlich willkommen, sich darauf zu beziehen und zu lernen!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Rotations- und Bewegungsanimationseffekte in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!