Heim >Web-Frontend >CSS-Tutorial >2D-Simulation zur Realisierung von Spezialeffekten für Riesenrad-Rotationsanimationen
2D-Simulation zur Realisierung von Spezialeffekten für Riesenrad-Rotationsanimationen
- php中世界最好的语言Original
- 2018-03-22 16:14:263441Durchsuche
Dieses Mal bringe ich Ihnen eine 2D-Simulation, um die Spezialeffekte der Riesenrad-Rotationsanimation zu realisieren. Was sind die Vorsichtsmaßnahmen für die Verwendung der 2D-Simulation, um die Spezialeffekte der Riesenrad-Rotationsanimation zu realisieren? , lass uns einen Blick darauf werfen.
Schauen Sie sich zuerst die Renderings an:
Aufgrund der Größe des Uploads kann es nur in diesem Sinne aufgezeichnet werden Das Originalbild ist unbegrenzt rund und rund.
Code:
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>模拟摩天轮动画</title>
<style>
*{margin:0;padding:0;}
.image{width:80px;height:80px;}
.image1{width:620px;height:620px;}
.p1{position:relative;margin:10px auto;width:638px;
animation:run 20s linear infinite;
-webkit-animation:run 20s linear infinite;
-moz-animation:run 20s linear infinite;
-o-animation:run 20s linear infinite;
}
img:nth-child(2){
position:absolute;top:25px;left:270px;opacity:0.7;
animation:run2 20s linear infinite;
-webkit-animation:run2 20s linear infinite;
-moz-animation:run2 20s linear infinite;
-o-animation:run2 20s linear infinite;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
}
img:nth-child(3){
position:absolute;top:580px;left:270px;opacity:0.7;
animation:run2 20s linear infinite;
-webkit-animation:run2 20s linear infinite;
-moz-animation:run2 20s linear infinite;
-o-animation:run2 20s linear infinite;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
}
img:nth-child(4){
position:absolute;top:300px;left:550px;opacity:0.7;
animation:run2 20s linear infinite;
-webkit-animation:run2 20s linear infinite;
-moz-animation:run2 20s linear infinite;
-o-animation:run2 20s linear infinite;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
}
img:nth-child(5){
position:absolute;top:300px;left:0px;opacity:0.7;
animation:run2 20s linear infinite;
-webkit-animation:run2 20s linear infinite;
-moz-animation:run2 20s linear infinite;
-o-animation:run2 20s linear infinite;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
}
@keyframes run
{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@-webkit-keyframes run
{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes run
{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}
@-o-keyframes run
{
0%{-o-transform:rotate(0deg)}
100%{-o-transform:rotate(360deg)}
}
@keyframes run2
{
0%{transform:rotate(0deg)}
100%{transform:rotate(-360deg)}
}
@-webkit-keyframes run2
{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(-360deg)}
}
@-moz-keyframes run2
{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(-360deg)}
}
@-o-keyframes run2
{
0%{-o-transform:rotate(0deg)}
100%{-o-transform:rotate(-360deg)}
}
</style>
</head>
<body>
<p class="p1">
<img src="1.png" class="image1">
<img src="1.jpg" class="image">
<img src="2.jpg" class="image">
<img src="3.jpg" class="image">
<img src="4.jpg" class="image">
</p>
</body>
</html></span>
Originalbild des Riesenrads:
Kommentare: transform-origin können Sie die Position des zu transformierenden Elements ändern.
Die Hauptfunktion dieses Attributs besteht darin, eine Position auszuwählen und dann um diese Position zu rotieren. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:Wie man mit dem nth-child()-Kompatibilitätsproblem unter IE8 umgeht
Box-Größe des CSS3-Attribut-Grafik-Tutorials
Wie man mit dem Verschwinden von CSS-Grenzlinien umgeht
Mehrere Hintergründe realisieren, um dynamische Ränder zu simulieren
Das obige ist der detaillierte Inhalt von2D-Simulation zur Realisierung von Spezialeffekten für Riesenrad-Rotationsanimationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!