本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3制作手风琴风格的幻灯片

本文介绍如何使用CSS 3制作手风琴风格的幻灯片。平时这些幻灯片都处于收缩状态,当鼠标指针移动到某个幻灯片上时,该幻灯片变为展开状态。

示例运行结果

页面HTML代码

在页面HTML代码内主要使用ul无序列表元素,代码非常简单。

<div class="accordian">
    <ul>
        <li>
            <div class="image_title">
                <a href="#">功夫熊猫</a>
            </div>
            <a href="#"><img src="image.jpg"/></a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">玩具总动员 2</a>
            </div>
            <a href="#"><img src="image.jpg"/></a>
        </li>
        ...
        ...
    </ul>
</div>

CSS样式代码

CSS样式代码也非常简单。以下样式代码中的注释说明了制作本示例时的关键所在。

* {
    margin: 0; 
    padding: 0;
}
/*宽度设置
图像宽度=640px
总图像个数 = 5
所以当鼠标指针位于某幅图像上时该图像宽度=640px,其他图像宽度=40px(你可以将40px设置为任何值)
总图像容器宽度=640 + 40*4 = 800px;
页面打开时每图像宽度= 800/5 = 160px;
*/
.accordian {
    width: 805px; 
    height: 320px;
    overflow: hidden;
    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

.accordian ul {
    width: 805px;
}

.accordian li {
    position: relative;
    display: block;
    width: 160px;
    float: left;
    border-left: 1px solid #888;
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    /*使用Transitions样式属性来实现一些动画效果*/
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
/*设置除了鼠标指针所位于图像之外的其他图像的宽度*/
.accordian ul:hover li {
    width: 40px;
}
/*设置鼠标指针位于某幅图像上时该图像宽度*/
.accordian ul li:hover {
    width: 640px;
}
.accordian li img {
    display: block;
}

/*图像标题样式*/
.image_title {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0; 
    bottom: 0;	
    width: 640px;
}
.image_title a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 20px;
    font-size: 16px;
}