html5 css3을 사용하여 슬라이더 전환 효과 얻기 javascript css_html5 튜토리얼 기술에 작별 인사

글쎄, 지난번에 가능한 한 빨리 몇 가지 기사를 보충하겠다고 말했지만 침착하게 약속을 놓쳤습니다. 글을 올린지 거의 한달이 넘었는데 정말 우울하네요. 요즘은 기본적으로 프로젝트가 하나씩 정리되어 있어서 시간이 없을 때 적당한 주제를 찾지 못하거나, 복잡한 주제가 있을 때 시간을 낼 수가 없어요. . 그래서 제가 한동안 고민했던 문제들에 대한 지식 포인트들을 정리하고, 여유 시간이 있을 때 하나씩 깊이 있게 공부한 뒤, 글로 정리해서 공유하기로 했습니다.

본론으로 들어가겠습니다. 슬라이더의 경우 과거에는 관련 전환 효과를 얻기 위해 CSS와 JS를 사용했습니다. 모든 사람들이 html5 css3을 사용하는 구현에 대해 논의하고 있다고 들었지만 저는 직접 구현한 적이 없습니다. 좋습니다. 이번에는 CSS3를 가지고 놀 시간이 있습니다. 사실 나도 웨이보 메시지에 매료됐고, 다른 사람들이 달성한 놀라운 결과를 보고 나도 직접 해보고 싶은 충동을 느꼈다.
1. 렌더링

예전 js로 얻은 효과와 크게 다르지 않아 보이지만 전체적인 느낌은 매우 우아합니다. 글쎄, CSS3의 힘은 아주 적은 코드를 작성하여 상대적으로 복잡한 효과를 얻을 수 있다는 것입니다. 그러나 이 예 역시 완벽하지는 않습니다. 두 그림 사이를 전환할 때 중간에 그림이 있으면 CSS3 애니메이션 실행 중에 계속 표시되므로 상대적으로 효과적이지 않습니다. 하지만 생각해보면 이것은 순수 CSS3로 얻은 효과입니다. js로 구현된 복잡한 html 구조 변경은 여기에서 볼 수 없으므로 위의 효과는 단순히 css3로는 달성하기 어렵습니다.
2. HTML 구조 >

제목1

설명1

/pic1.png"/>
< /article>

Title2

제목3

< img src="img/pic3.png"/>

제목4< /h1>
설명4

Title5

설명5

< ="slider4">

>

위 코드는 입력 라디오 그룹을 포함하는 기본 HTML 구조입니다. 여기에서 허브로 볼 수 있습니다. 이 예에서는 핵심 역할을 합니다. 진짜 영웅은 무대 뒤에 있는 사람이 되어서는 안 됩니다.)
아래 슬라이더에는 표시해야 할 이미지가 포함되어 있습니다. 내부의 왼쪽 여백을 조절하여 다양한 이미지를 표시할 수 있는 것 같습니다.

컨트롤은 그림의 왼쪽과 오른쪽에 있는 전환 화살표입니다. 왜 5개만 디자인해야 하는지 걱정하지 마세요. 이 예에서는 js를 사용하여 전환을 구현합니다.
마지막 활성은 사진 아래의 작은 클릭 버튼입니다. 탐색하려는 사진을 클릭하여 직접 선택할 수도 있고, 내부 구조를 풍부하게 만들어 썸네일 효과를 디자인할 수도 있습니다.
3. CSS 스타일 시트

코드 복사

코드는 다음과 같습니다. 🎜>

@charset utf-8;
/* common */
body{Background: #ddd;overflow-x: Hidden;}
#bd{width: 960px;margin : 100px 자동 ;최대 너비: 960px;}
/* 모듈: 슬라이더 */
#sliders{
border-radius: 5px
box-shadow: 1px 1px 4px #666; 🎜>패딩: 1%;
배경: #fff;
}
#overflow{
width: 100%
overflow: 숨김; 내부{
너비: 500%;
transiton: 모두 1s 선형;
-webkit-transition: 모든 1s 선형
}
#sliders 기사{
float; 🎜>너비: 20%;
}
#sliders 기사 .info{
위치: 절대값: 0
패딩:
색상:
font -family:
전환: 불투명도 0.1초 완화;
-webkit-transform: 번역Z(0)
-webkit-transition: 불투명도 0.1초 완화; >}
#sliders 기사 .info h1{
font-size: 22px;
font-weight:bold;
margin: 0 0 5px;
#sliders 기사 . 정보 a{
색상: #666;
텍스트 장식: 없음
}
/* 모듈: 제어 */
#controls{
높이: 50px; 너비: 100%;
여백: -25%;
#controls 라벨{
디스플레이: 없음
높이: 50px; >불투명도: 0.3;
커서: 포인터;
}
#controls label:hover{
불투명도: 1;
/* 모듈: 활성 */
# 활성{
너비: 100%;
텍스트 정렬: 중앙
}
#활성 라벨{
인라인 블록; 🎜>너비: 10px;
높이: 10px;
배경: #bbb;
테두리 색상:
}
#활성 라벨 :hover{
배경: #ccc;
}
/* 입력 확인 변경 스타일 */
#slider1:checked ~ #active label:nth-child(1),
#slider2 :checked ~ #active label:nth-child(2),
#slider3:checked ~ #active label:nth-child(3),
#slider4:checked ~ #active label:nth-child(4 ),
#slider5:checked ~ #active 라벨:nth-child(5){
배경: #333
}
#slider1:checked ~ #controls 라벨:nth-child(5 ),
#slider2:checked ~ #controls 라벨:nth-child(1),
#slider3:checked ~ #controls label:nth-child(2),
#slider4:checked ~ #controls label:nth -child(3),
#slider5:checked ~ #controls label:nth-child(4){
display: block
float:
background: url(. ./img /prev.png) 반복 없음;
여백-왼쪽: -70px;
}
#slider1:checked ~ #controls label:nth-child(2),
#slider2 :checked ~ #컨트롤 라벨:nth-child(3),
#slider3:checked ~ #컨트롤 라벨:nth-child(4),
#slider4:checked ~ #컨트롤 라벨:nth-child(5 ),
#slider5:checked ~ #controls label:nth-child(1){
display: block
float: right
background: url(../img/next.png; ) no-repeat;
margin-right: -70px;
}
#slider1:checked ~ #sliders 기사:nth-child(1) .info,
#slider2:checked ~ #sliders 기사:nth -child(2) .info,
#slider3:checked ~ #sliders 기사:nth-child(3) .info,
#slider4:checked ~ #sliders 기사:nth-child(4) .info,
#slider5:checked ~ #sliders 기사:nth-child(5) .info{
불투명도: 1
전환: 모두 0.6초 easy-out 1s; 전환: 모든 0.6초 여유 1
}
#slider1:checked ~ #sliders .inner{
margin-left: 0
}
#slider2:checked ~ #sliders .inner{
왼쪽 여백: -100%;
}
#slider3:선택됨 ~ #sliders .inner{
왼쪽 여백: -200%
}
# Slider4:체크됨 ~ #sliders .inner{
왼쪽 여백: -300%
}
#slider5:체크됨 ~ #sliders .inner{
왼쪽 여백:
}


좋아요, 위의 CSS 코드가 정말 많고 복잡하다는 점은 인정합니다. 하지만 정말 멋진 효과를 얻었고, 작성을 마쳤을 때 CSS3의 엄청난 마법에 깊은 인상을 받았습니다. . .
여기 코드의 전반부는 둥근 모서리와 그림자 측면에서 아름다운 디자인을 포함하여 슬라이더의 구조를 디자인하는 데 주로 사용됩니다. 후반부는 주로 사진을 전환하거나 제어 버튼을 전환할 때 동적 효과를 얻기 위한 애니메이션 효과입니다. 하지만 가장 중요한 것은 하단의 CSS3 선택기를 사용한다는 점인데, 이를 통해 이미지 전환 기능이 제대로 구현됩니다. 저는 이 예제에서 선택자가 매우 중요한 역할을 한다고 생각합니다. 과거에 CSS3를 배울 때 이 부분을 무시했기 때문입니다. 나는 항상 CSS3의 힘이 둥근 모서리, 그림자, 변형 및 애니메이션이라고 느꼈지만 이 코드는 실제로 CSS3에서 선택기가 얼마나 중요한지 알려줍니다. 일부 복잡한 논리에서는 이러한 CSS3 선택기를 사용하면 상상할 수 없는 효과를 얻을 수 있습니다.
4. 슬라이더 구현 원리
위 코드를 처음 읽으시면 처음에는 저와 같은 코드가 슬라이더의 효과를 얻을 수 있다고 믿지 않으실 것입니다.
자, 구현 원리를 분석해 보겠습니다.
위에서 상위 라디오 그룹은 매우 중요하며 슬라이더 구현의 허브라고 말했습니다. 네, 정말 그렇습니다.
슬라이더를 구현하려면 두 가지 전환을 구현해야 합니다. 즉, 제어 버튼을 클릭하면 그림이 동시에 전환되고, 그림이 전환되면 모든 제어 버튼이 올바르게 표시되어야 합니다. .
이 예에서는 라벨을 컨트롤 버튼으로 사용하고 기사에는 이미지가 포함되며 내부는 이미지의 컨테이너 역할을 합니다.
간단히 말하면 라벨과 상품 간의 연관성을 확립할 수 있는 방법이 없으며, 라벨 상태 정보가 상품 선정에 반영되기 어렵습니다. 라벨의 전환 상태를 기록할 수 있는 것이 없다면, 표시할 해당 순서에 따라 사진을 선택하는 수단을 사용하십시오.
자, 이제 라디오 그룹이 슬라이더 구현의 핵심인 이유를 이해하셨습니다. 네, 라벨의 클릭 상태를 기록하는 것 같습니다.
라벨의 for 속성을 사용하여 해당 라디오와 연결합니다. 라벨을 클릭하면 해당 라디오가 확인됩니다. 그런 다음 강력한 CSS3 선택기를 통해 내부를 왼쪽으로 이동하여 해당 이미지를 표시합니다. 물론 해당 왼쪽 및 오른쪽 선택 버튼도 선택기를 통해 표시됩니다. 마찬가지로 왼쪽, 오른쪽 버튼을 클릭했을 때 아래 5개 선택버튼의 상태도 이런 식으로 구현됩니다.
위 구현 원리는 비교적 간단합니다. 실제로 컨트롤 버튼의 클릭 상태를 기록할 수 있으면 선택기를 통해 슬라이더 효과를 얻을 수 있습니다.
라디오 그룹을 사용할 수 있을 뿐만 아니라 a:hover도 이 아이디어를 따라 a가 호버링할 때 사진 전환을 구현할 수 있습니다. 물론, 구현 원리를 이해한다면 이를 구현하는 다른 방법도 많이 있습니다.
5. 요약
사실 CSS3도 정말 재미있고, CSS3에서는 상상할 수 없는 효과도 많아요. 때로는 CSS3를 작성하려면 약간의 영리함이 필요하고 때로는 절묘한 구현 방법이 정말 놀랍다는 것을 알게 됩니다.
글쎄요, 이 예제는 저에게 많은 것을 얻었습니다. 특히 강력한 선택자 덕분에 과거에는 이를 너무 많이 무시했습니다. . .
아직 불연속적인 이미지 전환 문제를 고려해야 할 것 같습니다. 이를 지원하기 위해 일부 js를 사용해야 할 것 같습니다.
알겠습니다. 결과가 나오면 공유하겠습니다.