CSS3实现百页窗效果轮播图

来源：互联网发布：逆战抢红包软件编辑：程序博客网时间：2024/05/12 06:09

今天分享百页窗效果式的轮播图；
HTML代码：

<div class="main">    <input type="radio" name="btn" id="btn1" checked>    <label for="btn1">1</label>    <input type="radio" name="btn" id="btn2" >    <label for="btn2">2</label>    <input type="radio" name="btn" id="btn3" >    <label for="btn3">3</label>    <input type="radio" name="btn" id="btn4" >    <label for="btn4">4</label>    <div class="content">        <div>            <span></span>            <span></span>            <span></span>            <span></span>        </div>        <div>            <span></span>            <span></span>            <span></span>            <span></span>        </div>        <div>            <span></span>            <span></span>            <span></span>            <span></span>        </div>        <div>            <span></span>            <span></span>            <span></span>            <span></span>        </div>    </div></div>

CSS代码：

*{ margin: 0; padding: 0; }.main{ width: 900px; height: 500px; position: relative; }.content{ width: 100%; height: 100%; }.content>div{ width: 225px; height: 100%; background: #333; float: left; position: relative; overflow: hidden; }.content>div span{ width: 100%; height: 100%; display: block; background: red; position: absolute; top: 0; left: 225px; }input#btn1:checked~.content div span:nth-child(1){ background-image: url("./images/1.jpg") }input#btn2:checked~.content div span:nth-child(2){ background-image: url("./images/2.jpg") }input#btn3:checked~.content div span:nth-child(3){ background-image: url("./images/3.jpg") }input#btn4:checked~.content div span:nth-child(4){ background-image: url("./images/4.jpg") }.content div:nth-child(1) span{ background-position: 0px 0px; }.content div:nth-child(2) span{ background-position: -225px 0px; }.content div:nth-child(3) span{ background-position: -450px 0px; }.content div:nth-child(4) span{ background-position: -675px 0px; }input#btn1:checked ~ .content div span:nth-child(1),input#btn2:checked ~ .content div span:nth-child(2),input#btn3:checked ~ .content div span:nth-child(3),input#btn4:checked ~ .content div span:nth-child(4)        { left:0px; -webkit-transition:left 0.5s ease; }label{ width:30px; height: 30px; background: #33FFFF; display:block; border-radius:15px; text-align:center; line-height:30px; position: absolute; z-index:333; top: 450px;}input#btn1 + label{ left:700px; }input#btn2 + label{ left:750px; }input#btn3 + label{ left:800px; }input#btn4 + label{ left:850px; }input:checked + label{ background:#fff; border:5px solid #33FFFF; border-radius:20px;}input{ display:none; }

阅读全文

0 0