CSS3教程

当前位置: HTML5技术网 > CSS3教程 > Pure CSS3 Accordion Slider

Pure CSS3 Accordion Slider

       Accordion Slider 以前都是使用jQury或别的js脚本来制作,今天我们给大家展示一个纯CSS3实现的水平手风琴幻灯片播放的效果。这个效果有两个关键之处,第一是 HTML结构中的input[type="radio"]是必备的,第二是样式通过radio的选中与未选中来控制对应的img显示和隐藏。这里采用的是 css的兄弟元素选择器(~),这个是一个很好的应用。当然实现这种效果还可以通过“target”来实现,不过这种方法实现要借助js来显示默认的第一 张图片,有兴趣的可以将这个案例改装一下。


       HTML CODE

<ul class="main_promo clearfix" id="main_promo">
<li>
<input type="radio" name="radio-set" checked="checked"/>
<div class="slide">
<a href="#"><p>Slide One</p><strong>1</strong></a>
</div>
<div class="slide_img">
<img src="img/img_01.jpg" alt="" />
</div>
</li>
<li>
<input type="radio" name="radio-set" />
<div class="slide">
<a href="#slide_two"><p>Slide Two</p><strong>2</strong></a>
</div>
<div class="slide_img">
<img src="img/img_02.jpg" alt="" />
</div>
</li>
<li>
<input type="radio" name="radio-set" />
<div class="slide">
<a href="#slide_three"><p>Slide Three</p><strong>3</strong></a>
</div>
<div class="slide_img">
<img src="img/img_03.jpg" alt="" />
</div>
</li>
<li>
<input type="radio" name="radio-set" />
<div class="slide">
<a href="#slide_four"><p>Slide Four</p><strong>4</strong></a>
</div>
<div class="slide_img">
<img src="img/img_04.jpg" alt="" />
</div>
</li>
</ul>

       CSS CODE

body {
background-color: #f6f6f6;
}
.demo {
width: 940px;
margin: 40px auto 0;
}
.main_promo {
border: 5px solid #3d3d3d;
border-radius: 7px;
box-shadow: 0 8px 16px rgba(0,0,0,.2);
background-color: #1c1c1c;
}
.main_promo li {
position: relative;
float: left;
padding: 5px 0 5px 6px;
overflow: hidden;
}
.main_promo div {
float: left;
}

.slide a {
position: relative;
z-index: 1;
display: block;
outline:none;
width: 50px;
height: 300px;
border-radius: 5px;
background-color: #303030;
transition: all 0.3s ease-in;
}
.slide p {
position: absolute;
top: 30px;
left: -25px;
color: #ddd;
height:20px;
width: 100px;
font-size: 14px;
font-weight: bold;
text-shadow: 0 1px 1px rgba(0,0,0,.8);
word-break:break-all;
transform: rotate(-90deg);
}
.slide strong {
font-size: 30px;
color: #191919;
text-shadow: 0 1px 0 #454545;
position: absolute;
bottom: 15px;
left: 15px;
}
.slide_img {
overflow: hidden;
width: 0;
height: 0;
transition: width 0.5s ease-in-out;
}
.slide_img img {
width: 692px;
height: 300px;
}
input[type="radio"] {
position: absolute;
left: 5px;
z-index: 99;
width: 50px;
height: 300px;
opacity: 0;
cursor: pointer;
}
input:checked ~ .slide a {
text-decoration: none;
background:radial-gradient(circle,#434343,#303030);
}
input:checked ~ .slide_img {
overflow: visible;
width:692px;
height:300px;
margin-left: 8px;
}

特别声明:从这个案例开始,我们所有的CSS3属性都省去其前缀“-moz”、“-webkit”、“-o”、“-ms”,而用改用了prefixfree脚本来实现。

DEMO: http://www.w3cplus.com/demo/css3/CSS3AccordionSlider/index.html 
下载:CSS3AccordionSlider.zip


【Pure CSS3 Accordion Slider】相关文章

1. Pure CSS3 Accordion Slider

2. Pure CSS3 Create Luminous Button

3. Pure CSS3 Create Pagination

4. Pure CSS3 3D Buttons

5. Pure CSS3 Search Form

6. Pure CSS3 Circle Menu

7. Telefónica与Mozilla开拓基于HTML5互联网设备

8. CSS3系列教程:HSL 和HSLA

9. Dcode-it Crosscode Puzzles

10. CSS3边框-边框颜色(border-color)

本文来源:https://www.51html5.com/a892.html

点击展开全部

﹝Pure CSS3 Accordion Slider﹞相关内容

「Pure CSS3 Accordion Slider」相关专题

其它栏目

也许您还喜欢