캐러셀 효과를 얻기 위해 CSS3 애니메이션 애니메이션 속성을 사용하는 방법에 대한 자세한 설명-CSS 튜토리얼-php.cn

캐러셀 효과를 얻기 위해 CSS3 애니메이션 애니메이션 속성을 사용하는 방법에 대한 자세한 설명

巴扎黑

풀어 주다： 2018-05-18 10:57:48

원래의

4344명이 탐색했습니다.

CSS3의 애니메이션 속성을 사용하면 플래시 애니메이션처럼 키 프레임을 제어하여 애니메이션의 각 단계를 제어하여 보다 복잡한 애니메이션 효과를 얻을 수 있습니다. 이번 글을 통해 CSS3 애니메이션 애니메이션 속성을 기반으로 한 캐러셀 효과를 공유하겠습니다. 필요한 친구들은 참고하면 됩니다

애니메이션 소개:

CSS3의 애니메이션 속성을 사용하여 만들 수 있습니다. Flash와 같은 애니메이션은 키 프레임을 제어하여 애니메이션의 모든 단계를 제어하여 더욱 복잡한 애니메이션 효과를 얻을 수 있습니다. 애니메이션으로 구현되는 애니메이션 효과는 크게 두 부분으로 구성됩니다.

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

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

animation 속성 값:

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

구문: animation: 이름 기간 타이밍-함수 지연 반복-횟수 방향

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: 기본값. 애니메이션이 정상적으로 재생되어야 합니다.

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

캐러셀 이미지를 구현하기 위한 애니메이션 애니메이션

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮换</title>
    <style type="text/css">
        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>
</head>
<body>
    <p class="p_first">
        <p class="p_second">
            <img src="images/011-1.jpg" alt=""><img src="images/011-2.jpg" alt=""><img src="images/011-3.jpg" alt=""><img src="images/011-1.jpg" alt="">
        </p>
    </p>
</body>
</html>

로그인 후 복사

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

위 내용은 캐러셀 효과를 얻기 위해 CSS3 애니메이션 애니메이션 속성을 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!