利用css3的的过渡属性制作手风琴特效

来源：互联网发布：淘宝剩余时间编辑：程序博客网时间：2024/06/07 02:05

话不多说直接上代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    *{        margin: 0 ;        padding:0 ;    }        ul{            width: ;            height: ;        }        ul li{            float: left;            list-style: none;            width:;            height: ;            transition: width,0.5s;            /*设置过渡效果*/            overflow: hidden;            /*                最后一张图片大于li的宽度时会超出，使用overflow: hidden;可以去除超出的内容            */        }        ul:hover li{            width:变小;            /*            当鼠标悬停在整个ul的任意一张图片时，所有的li要缩小            */        }        ul li:hover{            width: 变大;            /*            当鼠标悬停在任意一张图片上li要变大            */        }    </style></head><body>        <ul>        <li><img src=></li>        <li><img src=></li>        <li><img src=></li>        <li><img src=></li>        <li><img src=></li>        </ul></body></html>

这里稍作解释一下，手风琴的特效来自于

（1）ul:hover li{        }（2）ul li:hover{        }

第2个选择器相对于第1个选择器而言对li标签的控制优先级要高，所以当鼠标悬停在其中一张图片上只有那张图片所对应的li标签变大，而其他的li标签变小。

另外再做一点说明，当要设置过渡效果是，首先先忽略所有的过渡效果，先把整体的框架模型先做出来，再针对性地对响应的属性设置过渡变化。

阅读全文

0 0