2D simulation to realize Ferris wheel rotation animation special effects

This time I will bring you 2D simulation to realize the special effects of Ferris wheel rotation animation. What are the precautions for using 2D simulation to realize the special effects of Ferris wheel rotation animation. The following is a practical case, let's take a look.

Look at the renderings first:

Due to the size of upload, we can only record this effect, the original image is infinite Round and round.

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 to realize Ferris wheel rotation animation special effects" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="1.jpg" alt="2D simulation to realize Ferris wheel rotation animation special effects" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="2.jpg" alt="2D simulation to realize Ferris wheel rotation animation special effects" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="3.jpg" alt="2D simulation to realize Ferris wheel rotation animation special effects" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="4.jpg" alt="2D simulation to realize Ferris wheel rotation animation special effects" >   
          
    </p>  
  
</span>

Original image of Ferris wheel:

##Comments: transform -origin AttributeAllows you to change the position of the element being converted.

The main function of this attribute is to select a position and then rotate around this position.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to deal with the nth-child() compatibility issue under IE8

box-sizing of CSS3 Attribute graphic tutorial

How to deal with the disappearance of CSS border lines

Realizing multiple backgrounds to simulate dynamic borders

The above is the detailed content of 2D simulation to realize Ferris wheel rotation animation special effects. For more information, please follow other related articles on the PHP Chinese website!