这里我们使用最简单和最少的代码实现。
1、准备图片
相同尺寸六张
2、详细代码如下
手风琴效果的原理是:当鼠标移入的时候,改变ul下li的宽度,方案简单可行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡模块-手风琴效果</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 960px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
ul li{
list-style: none;
width: 160px;
height: 300px;
float: left;
border: 1px solid white;