- 전체(91)
- html5(1)
- web accessibility(11)
- Cross Browsing(20)
- html basic(7)
- css basic(23)
- meta(2)
- form(12)
- table(2)
- menu(2)
- box(1)
- button(1)
- font(1)
- etc(8)
- CSS 애니메이션
배너 슬라이드를 만드는 데 필요한 CSS속성
[E~F 선택자]
선택되어지는 버튼을 활성화하는 데 사용됩니다.
E요소 뒤에 오는 모든 F 요소를 선택할 때 사용
[:checkde 선택자]
~선택자와 함꼐 선택되어지는 버튼을 활성화하는 데 사용됩니다.
선택되거나 눌린 라디오 버튼 또는 체크박스를 의미
[nth-child(n) 선택자]
선택된 버튼에 해당하는 배너 이미지를 선택하는 용도로 사용됩니다.
특정 요소의 n번째 자식요소를 선택
[transition]
선택된 배너 이미지가 나타나게 합니다.
transition:{property} {duration} {timing-function} {delay};
[animation]
배너이미지가 사라지게 하는 움직임을 설정합니다.
animation:{name} {duration} {easing} {delay} {iteration-count} {direction};
[@keyframes] 배너이미지가 사라지게 하는 움직임을 설정합니다.
< html lang = "ko" > < head > < meta charset = "utf-8" > < style type = "text/css" > *{margin:0;padding:0;} li{list-style:none} img{border:none} .bannerWrap{position:relative;width:300px;height:100px;border:10px solid #ddd} input{display:none} label{position:relative;left:190px;top:5px;float:left;width:20px;height:20px;margin-left:5px;cursor:pointer;text-align:center;background:#ddd;z-index:1000;} .bannerImg{position:absolute;width:300px;height:100px;overflow:hidden} .bannerImg li{position:absolute;top:0;left:300px} input:nth-of-type(1):checked ~ label:nth-of-type(1), input:nth-of-type(2):checked ~ label:nth-of-type(2), input:nth-of-type(3):checked ~ label:nth-of-type(3), input:nth-of-type(4):checked ~ label:nth-of-type(4){color:#fff;background:#000} input:nth-of-type(1):checked ~.bannerImg li:nth-of-type(1), input:nth-of-type(2):checked ~.bannerImg li:nth-of-type(2), input:nth-of-type(3):checked ~.bannerImg li:nth-of-type(3), input:nth-of-type(4):checked ~.bannerImg li:nth-of-type(4){ -webkit-animation:none;animation:none;/*밖으로 보내기*/ -webkit-transition:left 0.5s ease-in-out;transition:left 0.5s ease-in-out;left:0; z-index:10;/* 초기 움직임 제거 */ } /* 기존 이미지 왼쪽으로 사라지게 하기*/ input:checked ~.bannerImg li{-webkit-animation:slideOut 0.5s ease-in-out none;animation:slideOut 0.5s ease-in-out none} /* 애니메이션 정의 */ @keyframes slideOut{ 0%{left:0px} 100%{left:-300px} } </ style > </ head > < body > < section class = "bannerWrap" > < input id = "banner1" name = "bRadio" type = "radio" checked = "" > < label for = "banner1" title = "1st banner" >1</ label > < input id = "banner2" name = "bRadio" type = "radio" > < label for = "banner2" title = "2st banner" >2</ label > < input id = "banner3" name = "bRadio" type = "radio" > < label for = "banner3" title = "3st banner" >3</ label > < input id = "banner4" name = "bRadio" type = "radio" > < label for = "banner4" title = "4st banner" >4</ label > < ul class = "bannerImg" > < li >< a href = "#none" >< img src = "http://markupbang.com/blog/wp-content/uploads/2015/11/banner1.png" ></ a ></ li > < li >< a href = "#none" >< img src = "http://markupbang.com/blog/wp-content/uploads/2015/11/banner2.png" ></ a ></ li > < li >< a href = "#none" >< img src = "http://markupbang.com/blog/wp-content/uploads/2015/11/banner3.png" ></ a ></ li > < li >< a href = "#none" >< img src = "http://markupbang.com/blog/wp-content/uploads/2015/11/banner4.png" ></ a ></ li > </ ul > </ section > </ body > </ html > |
http://codepen.io/anon/pen/zZzVgZ
출처: http://markupbang.com/blog/?p=1051
댓글 0
댓글 쓰기 권한이 없습니다.
23 | tooltip | 2017.03.14 |
> | css3로 슬라이드 만들기 | 2017.03.14 |
21 | 말줄임 | 2016.05.27 |
20 | CSS transition 이해하기 | 2016.02.04 |
19 | CSS3애니메이션 툴 Sencha Animator | 2015.10.15 |
18 | reset 방법 모음 | 2014.11.28 |
17 | word-break | 2014.11.27 |
16 | text-transform | 2014.11.21 |
15 | display:none과 visibility: hidden | 2014.11.11 |
14 | 게시판 목록에서 제목항목 자동 ...로 말줄임 | 2014.11.07 |
13 | li의 list style type | 2014.11.06 |
12 | box-sizing | 2014.11.05 |
11 | font:11px/18px | 2014.06.23 |
10 | temp | 2014.06.20 |
9 | 파일 | 2014.06.20 |
8 | CSS 폰트 단위 | 2013.09.02 |
7 | CSS 선택자 형식(CSS Selector) | 2013.08.02 |
6 | CSS3로 그라데이션 이미지 만들기 | 2013.08.02 |
5 | 그라데이션 주기 | 2012.08.06 |
4 | CSS로 가변폭의 컨텐츠를 가운데 정렬하기 | 2013.08.02 |