메뉴 건너뛰기

검색창 닫기

HEUKMYO

Html/css

css basic css3로 슬라이드 만들기

흑묘 2017.03.14 14:09 read.1157

배너 슬라이드를 만드는 데 필요한 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] 배너이미지가 사라지게 하는 움직임을 설정합니다.

 <!doctype html>

<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

추가메뉴 목록
위로