一：纯css+html的手风琴效果 这种用css写的手风琴比较简单，主要是应用到css中的，transition属性。 代码如下：<!DOCTYPE HTML><html><head><style> ...
一：纯css+html的手风琴效果
这种用css写的手风琴比较简单，主要是应用到css中的，transition属性。
代码如下：
<!DOCTYPE HTML><html><head><style>body{background: url('bg.gif') repeat;}ul,li,p{margin: 0px;padding: 0px;list-style: none;} #div{width: 1180px;height: 405px;border:5px solid #ccc;padding: 0px;margin: 0px auto;overflow: hidden;} .list{width: 3200px;} .list li{float: left;width: 170px;height: 500px;;position: relative; -moz-transition:width 2s; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }.list:hover li{width: 107px;}.list li:hover{width: 538px;}.list li p{width: 100%;height: 100%;opacity: 0.5;position: absolute;top: 0px;left: 0px;background: black; }.list li:hover p{opacity:0}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript"></script></head><body ><div id="div"> <ul class="list"> <!--如果设置父级与子级之间没有空隙的话，将margin和padding设为0即可--> <li><img src='/images/loading.gif' data-original="image/1.jpg" style="width:538px;height:405px;"><p></p></li> <li><img src='/images/loading.gif' data-original="image/2.jpg" style="width:538px;height:405px;"><p></p></li> <li><img src='/images/loading.gif' data-original="image/3.jpg" style="width:538px;height:405px;"><p></p></li> <li><img src='/images/loading.gif' data-original="image/4.jpg" style="width:538px;height:405px;"><p></p></li> <li><img src='/images/loading.gif' data-original="image/5.jpg" style="width:538px;height:405px;"><p></p></li> <li><img src='/images/loading.gif' data-original="image/6.jpg" style="width:538px;height:405px;"><p></p></li> <li><img src='/images/loading.gif' data-original="image/7.jpg" style="width:538px;height:405px;"><p></p></li> </ul></div></body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：纯js和纯css+html制作的手风琴的效果
关键词：JS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
