의견 : 슬라이더와 관련하여 과거에는 CSS+JS가 관련 스위칭 효과를 달성하는 데 사용되었습니다. 모든 사람이 HTML5+CSS3을 사용하는 구현 방법에 대해 논의하고 있다고 들었지만 직접 구현 한 적이 없습니다. 좋아, 이번에는 CSS3를 할 시간이있다. 관심있는 친구들은 더 많은 것을 배울 수 있습니다
글쎄, 지난번에 나는 몇 가지 기사를 빨리 추가하겠다고 말했지만 침착하게 약속을 깨뜨렸다. 그것은 또 다른 달에만 출판되었으며, 정말 우울합니다. 나는 항상 최근에 시간을 찾을 수 없었고 기본적으로 하나의 프로젝트를 차례로 마련했습니다. 나는 자유로울 때 올바른 주제를 찾을 수 없었거나 혼란 스러웠을 때 시간을 찾을 수 없었습니다. 그래서 나는 일정 기간 동안 어려움을 겪고있는 문제의 지식 포인트를 요약하고 내가 자유 롭을 때 하나씩 연구 한 다음 기사로 구성하여 공유하기로 결정했습니다.주제에서 시작하여 슬라이더를 언급하면 항상 CSS+JS를 사용하여 관련 스위칭 효과를 달성했습니다. 모든 사람이 HTML5+CSS3을 사용하는 구현 방법에 대해 논의하고 있다고 들었지만 직접 구현 한 적이 없습니다. 좋아, 이번에는 CSS3를 할 시간이있다. 사실, 나는 또한 Weibo의 메시지에 매료되었습니다. 다른 사람들이 달성 한 결과가 매우 좋았다는 것을보고, 나는 그렇게하고 싶은 충동이있었습니다.
1. 복제 다이어그램
과거에 JS에서 달성 한 효과와 크게 다르지는 않지만 전반적인 느낌은 매우 우아합니다. CSS3의 힘은 더 복잡한 결과를 얻기 위해 거의 코드를 거의 작성하지 않았다는 것입니다. 그러나이 예에는 완벽하지 않은 것이 있습니다. 두 장의 사진을 전환 할 때 중간에 사진이있는 경우 CSS3 애니메이션을 실행하는 동안 여전히 사진을 볼 수 있습니다. 그러나 그것에 대해 생각하십시오. 이것은 순수한 CSS3에 의해 달성 된 효과입니다. JS를 사용하여 구현 된 복잡한 HTML 구조 변경은 여기서 볼 수 없으므로 위의 효과는 단순히 CSS3로 구현하기가 어렵습니다.
2. HTML 구조
<div>
<입력 점검 유형 = "Radio">
<입력 유형 = "라디오">
<입력 유형 = "라디오">
<입력 유형 = "라디오">
<입력 유형 = "라디오">
<div>
<div>
<div>
<기사>
<div>
<H1> Title1 </h1>
<a href = "#"> description1 </a>
</div>
<img src = "img/pic1.png"/>
</article>
<기사>
<div>
<H1> Title2 </h1>
<a href = "#"> description2 </a>
</div>
<img src = "img/pic2.png"/>
</article>
<기사>
<div>
<H1> Title3 </h1>
<a href = "#"> description3 </a>
</div>
<img src = "img/pic3.png"/>
</article>
<기사>
<div>
<H1> Title4 </h1>
<a href = "#"> description4 </a>
</div>
<img src = "img/pic4.png"/>
</article>
<기사>
<div>
<H1> Title5 </h1>
<a href = "#"> description5 </a>
</div>
<img src = "img/pic5.png"/>
</article>
</div>
</div>
</div>
<div>
<label for = "slider1"> </label>
<label for = "slider2"> </label>
<label for = "slider3"> </label>
<label for = "slider4"> </label>
<label for = "slider5"> </label>
</div>
<div>
<label for = "slider1"> </label>
<label for = "slider2"> </label>
<label for = "slider3"> </label>
<label for = "slider4"> </label>
<label for = "slider5"> </label>
</div>
</div>
위의 코드는 입력 라디오 그룹을 포함하는 주요 HTML 구조로 여기에서 허브로 볼 수 있으며이 예에서 매우 중요한 역할을합니다 (이것이 예에서 숨기고 싶지 않은 이유입니다. 진짜 영웅은 장면 뒤의 영웅이되어서는 안됩니다).
아래 슬라이더에는 표시 해야하는 이미지가 포함되어 있습니다. 여기에서는 슬라이딩 도어의 효과 인 것 같습니다. 내부 마진 왼쪽을 제어하여 다른 이미지를 표시합니다.
컨트롤은 그림의 왼쪽과 오른쪽의 스위칭 화살표입니다. 걱정하지 마세요. 왜 5를 디자인해야합니까? 두 개만 충분한 것 같습니다. 이 예에서는 JS를 사용하여 전환을 달성하지 못할 것임을 상기시켜주십시오.
마지막 활성은 그림 아래의 클릭 버튼입니다. 클릭하여 찾아 볼 사진을 직접 선택할 수 있습니다. 내부의 구조를 풍부하게하여 축소판 효과를 설계 할 수도 있습니다.
3. CSS 스타일 시트
@Charset UTF-8;
/* 흔한 */
바디 {배경 : #ddd; 오버 플로우 -x : 숨겨진;}
#bd {너비 : 960px; 마진 : 100px 자동; 최대 width : 960px;}
/ * 모듈 : 슬라이더 */
#Sliders {
Border-Radius : 5px;
Box-Shadow : 1px 1px 4px #666;
패딩 : 1%;
배경 : #ffff;
}
#과다{
너비 : 100%;
오버플로 : 숨겨진;
}
#sliders .inner {
너비 : 500%;
트랜스 턴 : 모든 1s 선형;
-webkit-transition : 모든 1s 선형;
}
#Sliders 기사 {
플로트 : 왼쪽;
너비 : 20%;
}
#Sliders 기사 .info {
위치 : 절대;
불투명도 : 0;
패딩 : 30px;
색상 : #666;
글꼴 패밀리 : arial;
전환 : 불투명도 0.1s 편의;
-webkit-transform : Translatez (0);
-webkit-transition : 불투명도 0.1s 편의성;
}
#Sliders 기사 .info h1 {
글꼴 크기 : 22px;
글꼴 중량 : 대담한;
마진 : 0 0 5px;
}
#sliders 기사 .info a {
색상 : #666;
텍스트 결정 : 없음;
}
/ * 모듈 : 제어 */
#통제 수단{
높이 : 50px;
너비 : 100%;
마진 -탑 : -25%;
}
#controls 레이블 {
디스플레이 : 없음;
너비 : 50px;
높이 : 50px;
불투명도 : 0.3;
커서 : 포인터;
}
#controls 레이블 : hover {
불투명도 : 1;
}
/ * 모듈 : Active */
#활동적인{
너비 : 100%;
마진-탑 : 23%;
텍스트 정렬 : 센터;
}
#Active 레이블 {
디스플레이 : 인라인 블록;
너비 : 10px;
높이 : 10px;
Border-Radius : 5px;
배경 : #BBB;
국경 색상 : #777;
}
#Active 레이블 : 호버 {
배경 : #CCC;
}
/ * 입력 점검 변경 스타일 */
#slider1 : 확인 ~ #Active 레이블 : nth-Child (1),
#Slider2 : 확인 된 ~ #Active 레이블 : Nth-Child (2),
#Slider3 : 확인 ~ #Active 레이블 : Nth-Child (3),
#Slider4 : 확인 된 ~ #Active 레이블 : Nth-Child (4),
#Slider5 : 확인 된 ~ #Active 레이블 : nth-Child (5) {
배경 : #333;
}
#slider1 : 확인 된 ~ #controls 레이블 : nth-Child (5),
#Slider2 : 확인 된 ~ #Controls 레이블 : Nth-Child (1),
#slider3 : 확인 된 ~ #controls 레이블 : nth-Child (2),
#Slider4 : 확인 된 ~ #Controls 레이블 : Nth-Child (3),
#Slider5 : 확인 된 ~ #Controls 레이블 : nth-Child (4) {
디스플레이 : 블록;
플로트 : 왼쪽;
배경 : URL (../ img/prev.png) No-Repeat;
마진 왼쪽 : -70px;
}
#slider1 : 확인 된 ~ #controls 레이블 : nth-Child (2),
#Slider2 : 확인 된 ~ #Controls 레이블 : Nth-Child (3),
#slider3 : 확인 된 ~ #controls 레이블 : nth-Child (4),
#Slider4 : 확인 된 ~ #Controls 레이블 : Nth-Child (5),
#Slider5 : 확인 된 ~ #controls 레이블 : nth-Child (1) {
디스플레이 : 블록;
플로트 : 오른쪽;
배경 : URL (../ img/next.png) no-repeat;
마진 오른쪽 : -70px;
}
#slider1 : 확인 ~ #Sliders 기사 : nth-Child (1) .info,
#Slider2 : 확인 ~ #Sliders 기사 : Nth-Child (2) .info,
#slider3 : 확인 ~ #Sliders 기사 : nth-Child (3) .info,
#Slider4 : 확인 ~ #Sliders 기사 : Nth-Child (4) .info,
#Slider5 : 확인 ~ #Sliders 기사 : nth-Child (5) .info {
불투명도 : 1;
전환 : 모든 0.6 초의 편의 1s;
-webkit-transition : 모든 0.6S EASE-OUT 1s;
}
#slider1 : 확인 된 ~ #sliders .inner {
왼쪽 마진 : 0;
}
#slider2 : 확인 ~ #sliders .inner {
마진 왼쪽 : -100%;
}
#slider3 : 확인 ~ #sliders .inner {
마진 왼쪽 : -200%;
}
#Slider4 : 확인 된 ~ #sliders .inner {
마진 왼쪽 : -300%;
}
#slider5 : 확인 ~ #sliders .inner {
마진 왼쪽 : -400%;
}
좋아, 위의 CSS 코드가 실제로 더 복잡하고 복잡하다는 것을 인정하지만, 실제로는 매우 눈부신 효과를 얻었으며, 글을 쓰면 CSS3의 거대한 마법에도 깊은 인상을 받았습니다. . .
이 상반기의 코드는 주로 둥근 코너와 그림자 미화 설계를 포함하여 슬라이더의 구조를 설계하는 데 사용됩니다. 후반에는 주로 사진이나 제어 버튼을 전환 할 때 동적 효과를 실현하기 위해 일부 애니메이션 효과가 포함되어 있습니다. 그러나 가장 중요한 것은 하단 CSS3 선택기를 사용하는 것입니다. 이는 이미지 스위칭의 기능을 실제로 실현합니다. 나는 셀렉터가 과거에 CSS3를 배우는 데 무시한 것이기 때문에 셀렉터가 예에서 매우 중요한 역할을한다고 생각합니다. 나는 항상 CSS3의 강력한 것이 둥근 코너, 그림자, 변형 및 애니메이션이라고 생각하지만이 코드는 선택기가 CSS3의 얼마나 중요한지 알려줍니다. 일부 복잡한 논리에서, 이러한 CSS3 선택기를 사용하면 상상할 수없는 효과를 얻을 수 있습니다.
4. 슬라이더 구현의 원리
위의 코드를 처음 읽었을 때 처음에 내가했던 것과 동일해야합니다. 나는 그러한 코드가 슬라이더의 효과를 달성 할 수 있다고 생각하지 않습니다.
자, 구현 원리를 분석하겠습니다.
위에서 말했듯이, 최고 라디오 그룹은 매우 중요하며 슬라이더 구현의 허브입니다. 예, 정말 그렇습니다.
슬라이더를 구현하려면 두 가지 유형의 스위칭이 있습니다. 즉 제어 버튼을 클릭 할 때 그림이 전환됩니다. 동시에 그림을 전환 할 때 모든 제어 버튼이 올바르게 표시되도록하십시오.
이 예에서는 레이블을 제어 버튼으로 사용하고 기사에는 그림이 포함되어 있으며 내부는 그림의 컨테이너입니다.
간단히 생각하면 레이블과 기사를 연결할 수 없으며 레이블 상태 정보는 기사의 선택을 반영하기가 어렵습니다. 레이블의 스위칭 상태를 기록 할 수있는 것이 없다면 해당 순서로 그림을 선택하여 일부 수단을 통해 표시하십시오.
글쎄, 이제 그 라디오 그룹이 왜 슬라이더 구현의 열쇠인지 이해합니다. 예, 레이블의 클릭 상태를 기록하는 것으로 보입니다.
해당 라디오에 해당하기 위해 속성에 레이블을 사용합니다. 레이블을 클릭하면 해당 라디오가 확인됩니다. 그런 다음 강력한 CSS3 선택기를 통해 내부를 왼쪽으로 이동하여 해당 그림을 표시하십시오. 물론, 해당 왼쪽 및 오른쪽 선택 버튼도 선택기를 통해 표시됩니다. 동일한 토큰으로 왼쪽 및 오른쪽 버튼을 클릭하면 아래 5 개의 선택 버튼의 상태도 이러한 방식으로 실현됩니다.
위의 구현 원리는 비교적 간단합니다. 실제로 제어 버튼의 클릭 상태를 기록 할 수있는 한 선택기를 통해 슬라이더 효과를 달성 할 수 있습니다.
라디오 그룹뿐만 아니라 A : Hover는이 아이디어에 따라 호버가있을 때 이미지 전환을 구현할 수 있습니다. 물론 구현 원리를 이해하는 한 다른 많은 구현 방법이 있습니다.
5. 요약
실제로 CSS3은 많은 효과와 함께 정말 재미 있습니다. CSS3에는 예상치 못한 결과 만 있지만 아무도 할 수 없습니다. 때때로 나는 CSS3을 쓰는 데 약간의 영리함이 필요하며 때로는 일부 절묘한 구현 방법이 실제로 칭찬할만한 것임을 알게됩니다.
글쎄, 작은 연습으로서,이 예는 특히 강력한 선택기를 많이 얻었으므로 과거에 그것을 무시한 것을 부끄러워합니다. . .
또한 불연속 이미지 전환 문제를 고려해야합니다. 도와주기 위해 약간의 JS를 사용해야하는 것 같습니다.
결과가 있으면 공유해 봅시다.