简易手风琴效果

2019年03月30日| 作者:策策| 浏览:217次


一个好看的小特效



手风琴效果看起来很舒服的赶脚。所以嘛,我就又重新做了一下


GIF.gif


哎呀,忘了录制光标了,就是光标移到到哪一块,哪一块出来的那种,尝试一下吧。



(策策丢下了一串代码.......然后跑啦)



HTML:

<ul>
    <li><img src="1.png" alt=""/><p>怎么样?</p></li>
    <li><img src="2.png" alt=""/><p>好不好看</p></li>
    <li><img src="3.png" alt=""/><p>好嗨哦</p></li>
    <li><img src="4.png" alt=""/><p>好嗨哦</p></li>
    <li><img src="5.png" alt=""/><p>好嗨哦</p></li>
</ul>

CSS:

*{margin:0;padding:0;}    /* 这是为了方便,在开发中可不建议使用通配符清除哦 */
    ul{
        list-style-type:none;
        width:300px;
        height:140px;
        display:flex;    /* 弹性盒子,作用嘛,就是让li标签横排,在li浮动也能出效果,但是不建议使用浮动. */
        overflow:hidden;
        box-shadow: 0 0 10px #000;
    }
    li{
        width:60px;
        height:140px;
        transition: .8s;    /* 过渡 */
    }
    li p{
        width:200px;
        font-size: 12px;
        background-color:rgba(0,0,0,.8);
        transform:translate(0,-20px);
        color:#fff;
        }
    ul:hover li{width:25px;}    /* 鼠标经过ul区域,li的宽度编程25px */
    ul li:hover{width:200px;}    /* 经过哪个li,哪个li宽度变大 */



(っ ̯ -。) 眼快瞎了


文章标签:CSS

本文选自策策的原创文章,转载请注明内容来源:CeceBlog(https://cecebk.cn/post/15.html)

评论列表:

评论:




作者动态
制作主题,网站,设计,收徒 联系站长
标签列表