CSS에서 이미지를 스크롤하는 방법
- 藏色散人원래의
- 2021-01-28 10:41:128615검색
CSS에서 그림을 스크롤하는 방법: 먼저 기본 코드의 각 부분에 동일한 그림 두 세트를 설정한 다음 nav 및 ul 크기를 설정하고 애니메이션을 정의하고 마우스 호버 및 애니메이션 일시 중지 효과를 추가합니다. ; 마지막으로 nav :hidden에 "overflow"를 추가하여 초과된 부분을 숨깁니다.
이 튜토리얼의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터.
추천: css 비디오 튜토리얼
먼저 동일한 그림 두 세트를 (같은 줄에) 제공하고 전체 그림을 그림 세트의 길이만큼 왼쪽으로 이동합니다.
이렇게 하면 애니메이션이 끝나면 빠르게 원래 위치로 돌아가고 이때 두 번째 사진 세트가 계속해서 왼쪽으로 스크롤되는 것처럼 보입니다.
구체적인 단계는 다음과 같습니다.
1. 메인 코드의 모든 곳에 동일한 그림 두 세트를 설정합니다.
<nav> <ul> <li> <img src="image/1.jpg" alt=""></li> <li> <img src="image/2.jpg" alt=""></li> <li> <img src="image/3.jpg" alt=""></li> <li> <img src="image/4.jpg" alt=""></li> <li> <img src="image/5.jpg" alt=""></li> <li> <img src="image/6.jpg" alt=""></li> </ul> </nav>
2 탐색 크기를 설정합니다. 너비는 그림 그룹의 너비를 합친 것입니다. 높이는 그림의 높이입니다.
nav {
width: 750px;
height: 170px;
border: 1px solid red;
margin: 100px auto;
}3. ul 크기를 설정하고, 너비는 nav의 두 배이고, 높이는 nav와 동일하며, 애니메이션 관련 속성을 지정합니다.
ul {
width: 200%;
height: 100%;
animation: picmove 5s linear infinite forwards;
}4. 주로 사진 그룹의 길이를 이동하기 위해 애니메이션을 정의합니다. 왼쪽으로
@keyframes picmove {
from {
transform: translate(0);
}
to {
transform: translate(-750px);
}
}5. 추가 마우스를 올리면 애니메이션이 일시 중지됩니다
ul:hover {
animation-play-state: paused;
}6. 마지막으로 탐색에 Overflow:hidden을 추가하여 스크롤되는 그림 막대 전체가 준비되도록 합니다.
전체 코드는 다음과 같습니다<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
nav {
width: 750px;
height: 170px;
border: 1px solid red;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 200%;
height: 100%;
animation: picmove 5s linear infinite forwards;
}
@keyframes picmove {
from {
transform: translate(0);
}
to {
transform: translate(-750px);
}
}
img {
width: 250px;
height: 170px;
float: left;
}
ul:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<nav>
<ul>
<li><img src="image/1.jpg" alt=""></li>
<li><img src="image/2.jpg" alt=""></li>
<li><img src="image/3.jpg" alt=""></li>
<li><img src="image/4.jpg" alt=""></li>
<li><img src="image/5.jpg" alt=""></li>
<li><img src="image/6.jpg" alt=""></li>
</ul>
</nav>
</body>
</html>렌더링:
위 내용은 CSS에서 이미지를 스크롤하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!