animation 속성은 carousel 메소드를 직접 구현합니다.

이번에는 애니메이션 속성을 이용하여 캐러셀을 직접 구현하는 방법을 알려드리겠습니다. 캐러셀을 구현하기 위한 애니메이션 속성의 주의사항은 무엇인지 살펴보겠습니다.

애니메이션 소개:

CSS3의 애니메이션 속성을 사용하면 플래시 애니메이션처럼 더 복잡한 애니메이션 효과를 얻기 위해 키 프레임을 제어하여 애니메이션의 각 단계를 제어할 수 있습니다. 애니메이션으로 구현되는 애니메이션 효과는 크게 두 부분으로 구성됩니다.

1) Flash 애니메이션과 유사한 프레임을 통해 애니메이션을 선언합니다.

2) 애니메이션 속성에서 키 프레임으로 선언된 애니메이션을 호출합니다.

animation 속성 값:

animation 속성은 약식 속성입니다.

구문: ​​animation: 이름 지속 시간 timing-function 지연 반복 횟수 direction;

animation 6개 애니메이션 속성 설정:

animation-name: 선택기에 바인딩되어야 하는 키프레임 이름을 지정합니다. 값:

none: (기본값) 애니메이션 효과를 지정하지 않습니다(계단식에서 애니메이션을 재정의하는 데 사용할 수 있음).

keyframename: 선택기에 바인딩되어야 하는 키프레임의 이름을 지정합니다.

animation-duration: 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다. 값:

time: 애니메이션을 완료하는 데 걸리는 시간을 지정합니다. 기본값은 0이며 애니메이션 효과가 없음을 의미합니다.

animation-timing-function: 애니메이션의 속도 곡선을 지정합니다. 값:

ease: 기본값. 애니메이션은 느린 속도로 시작한 다음, 속도가 빨라지고, 끝나기 전에 느려집니다.

선형: 애니메이션의 속도가 처음부터 끝까지 동일합니다.

ease-in: 애니메이션이 느린 속도로 시작됩니다.

ease-out: 애니메이션이 느린 속도로 끝납니다.

ease-in-out: 애니메이션이 느린 속도로 시작하고 끝납니다.

cubic-bezier(n,n,n,n): 큐빅-베지어 함수에서 자신만의 값을 정의하세요. 가능한 값은 0부터 1까지의 숫자값이다.

animation-delay: 애니메이션이 시작되기 전의 지연 시간을 지정합니다. 값:

time: (선택 사항) 애니메이션을 시작하기 전에 기다리는 시간을 초 또는 밀리초 단위로 정의합니다. 기본값은 0입니다.

animation-iteration-count: 애니메이션을 재생해야 하는 횟수를 지정합니다. 값:

n: 애니메이션 재생 횟수를 정의하는 값입니다.

infinite: 애니메이션이 무한히 재생되도록 지정합니다.

animation-direction: 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다. 값:

normal: 기본값. 애니메이션이 정상적으로 재생되어야 합니다.

대안: 애니메이션이 차례로 역방향으로 재생되어야 합니다.

animation animation carousel image

nbsp;html>


    <meta>
    <title>图片轮换</title>
    <style>
        p,img{
            margin: 0;
            padding: 0;
        }
        .p_first{
            width: 1000px;
            height: 300px;
            margin-top: 100px;
            margin-left: 250px;
            overflow: hidden;
        }
        .p_second{
            width: 4000px;
            position: relative;
            animation: myimg 12s linear infinite normal; 
        }
        @keyframes myimg{
            0{
                left: 0;
            }
            5%{
                left: 0;
            }
            30%{
                left: -1000px;
            }
            35%{
                left: -1000px;
            }
            60%{
                left: -2000px;
            }
            65%{
                left: -2000px;
            }
            95%{
                left: -3000px;
            }
            100%{
                left: -3000px;
            }
        }
    </style>


    <p>
        </p><p>
            <img  src="/static/imghwm/default1.png" data-src="images/011-1.jpg" class="lazy" alt="animation 속성은 carousel 메소드를 직접 구현합니다." ><img  src="/static/imghwm/default1.png" data-src="images/011-2.jpg" class="lazy" alt="animation 속성은 carousel 메소드를 직접 구현합니다." ><img  src="/static/imghwm/default1.png" data-src="images/011-3.jpg" class="lazy" alt="animation 속성은 carousel 메소드를 직접 구현합니다." ><img  src="/static/imghwm/default1.png" data-src="images/011-1.jpg" class="lazy" alt="animation 속성은 carousel 메소드를 직접 구현합니다." >
        </p>
    

사진 태그는 같은 줄에 배치되어야 합니다. 그렇지 않으면 사진 사이에 간격이 생길 수 있습니다.

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

추천 도서:

css3의 포인터 이벤트 사용에 대한 자세한 설명

focus-within

사용에 대한 자세한 설명

위 내용은 animation 속성은 carousel 메소드를 직접 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!