animation 속성은 carousel 메소드를 직접 구현합니다.
- php中世界最好的语言원래의
- 2018-03-21 11:56:491545검색
이번에는 애니메이션 속성을 이용하여 캐러셀을 직접 구현하는 방법을 알려드리겠습니다. 캐러셀을 구현하기 위한 애니메이션 속성의 주의사항은 무엇인지 살펴보겠습니다.
애니메이션 소개:
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
<!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>
사진 태그는 같은 줄에 배치되어야 합니다. 그렇지 않으면 사진 사이에 간격이 생길 수 있습니다.
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
사용에 대한 자세한 설명위 내용은 animation 속성은 carousel 메소드를 직접 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!