관람차 회전 애니메이션 특수 효과를 구현하는 2D 시뮬레이션

이번에는 관람차 회전 애니메이션의 특수 효과를 구현하기 위한 2D 시뮬레이션을 가져오겠습니다. 관람차 회전 애니메이션의 특수 효과를 구현하기 위해 2D 시뮬레이션을 사용할 때 주의 사항은 무엇입니까? 바라보다.

먼저 렌더링을 살펴보겠습니다.

업로드의 크기로 인해 이 효과만 기록할 수 있습니다. 원본 이미지는 원의 무한 루프입니다.

코드:

<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 시뮬레이션" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="1.jpg" alt="관람차 회전 애니메이션 특수 효과를 구현하는 2D 시뮬레이션" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="2.jpg" alt="관람차 회전 애니메이션 특수 효과를 구현하는 2D 시뮬레이션" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="3.jpg" alt="관람차 회전 애니메이션 특수 효과를 구현하는 2D 시뮬레이션" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="4.jpg" alt="관람차 회전 애니메이션 특수 효과를 구현하는 2D 시뮬레이션" >   
          
    </p>  
  
</span>

관람차 원본 이미지:

댓글: transform-origin Attribute를 사용하면 변형된 요소의 위치를 ​​변경할 수 있습니다.

이 속성의 주요 기능은 위치를 선택한 다음 이 위치를 중심으로 회전하는 것입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

IE8에서 nth-child() 호환성 문제를 처리하는 방법

CSS3 상자 크기 속성 그래픽 튜토리얼

CSS 경계선이 사라지는 문제를 처리하는 방법

다중 배경 시뮬레이션 동적 테두리 실현

위 내용은 관람차 회전 애니메이션 특수 효과를 구현하는 2D 시뮬레이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!