캐러셀 효과를 얻기 위해 CSS3 애니메이션 애니메이션 속성을 사용하는 방법에 대한 자세한 설명
- 巴扎黑원래의
- 2018-05-18 10:57:484339검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!