2D-Simulation zur Realisierung von Spezialeffekten für Riesenrad-Rotationsanimationen

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>nbsp;html>  
  
  
    <meta>  
    <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>  
  
  
    <p>  
        <img  class="image1 lazy" src="/static/imghwm/default1.png" data-src="1.png" alt="2D-Simulation zur Realisierung von Spezialeffekten für Riesenrad-Rotationsanimationen" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="1.jpg" alt="2D-Simulation zur Realisierung von Spezialeffekten für Riesenrad-Rotationsanimationen" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="2.jpg" alt="2D-Simulation zur Realisierung von Spezialeffekten für Riesenrad-Rotationsanimationen" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="3.jpg" alt="2D-Simulation zur Realisierung von Spezialeffekten für Riesenrad-Rotationsanimationen" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="4.jpg" alt="2D-Simulation zur Realisierung von Spezialeffekten für Riesenrad-Rotationsanimationen" >   
          
    </p>  
  
</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!