纯css制作手风琴特效

最新推荐文章于 2024-09-04 07:11:11 发布

weixin_51682008

最新推荐文章于 2024-09-04 07:11:11 发布

阅读量160

点赞数

文章标签： html css html5 css3

本文链接：https://blog.csdn.net/weixin_51682008/article/details/110779728

版权

在这里插入图片描述

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
</head>
<link rel="stylesheet" href="../css/手风琴.css">
<body>
    <div>
        <ul>
            <li><img src="../images/1.jpg" alt=""><p>图片1</p></li>
            <li><img src="../images/2.jpg" alt=""><p>图片2</p></li>
            <li><img src="../images/3.jpg" alt=""><p>图片3</p></li>
            <li><img src="../images/4.jpg" alt=""><p>图片4</p></li>
            <li><img src="../images/5.jpg" alt=""><p>图片5</p></li>
        </ul>
    </div>
</body>
</html>

css部分：

*{
    margin: 0;
    padding: 0;
}
div{
    /*弹性布局——水平垂直居中*/
    display: flex;
    justify-content: center;
    align-content: center;
}
div ul{
    width: 1000px;
    height: 300px;
    /*溢出隐藏*/
    overflow: hidden;
}
div ul:hover li{
    /*鼠标移入改变li宽度——先执行*/
    width: 12.5%;
    transition: width .6s;
}
div ul img{
    width: 500px;
    height: 300px;
}
div ul li{
    /*相对定位*/
    position: relative;
    list-style-type: none;
    float: left;
    width: 200px;
    height: 300px;
}
div ul li:hover{
    /*鼠标移入改变当前li宽度——后执行*/
    width: 50%;
}
div ul li p{
    /*绝对定位*/
    position: absolute;
    height: 20px;
    line-height: 20px;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 10px;
    color: white;
    background-color: rgba(0,0,0,0.4);
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
</head>
<style>
	*{
	    margin: 0;
	    padding: 0;
	}
	div{
	    /*弹性布局——水平垂直居中*/
	    display: flex;
	    justify-content: center;
	    align-content: center;
	}
	div ul{
	    width: 1000px;
	    height: 300px;
	    /*溢出隐藏*/
	    overflow: hidden;
	}
	div ul:hover li{
	    /*鼠标移入改变li宽度——先执行*/
	    width: 12.5%;
	    transition: width .6s;
	}
	div ul img{
	    width: 500px;
	    height: 300px;
	}
	div ul li{
	    /*相对定位*/
	    position: relative;
	    list-style-type: none;
	    float: left;
	    width: 200px;
	    height: 300px;
	}
	div ul li:hover{
	    /*鼠标移入改变当前li宽度——后执行*/
	    width: 50%;
	}
	div ul li p{
	    /*绝对定位*/
	    position: absolute;
	    height: 20px;
	    line-height: 20px;
	    bottom: 0;
	    width: 100%;
	    text-align: center;
	    font-size: 10px;
	    color: white;
	    background-color: rgba(0,0,0,0.4);
	}

</style>
<body>
    <div>
        <ul>
            <li><img src="../images/1.jpg" alt=""><p>图片1</p></li>
            <li><img src="../images/2.jpg" alt=""><p>图片2</p></li>
            <li><img src="../images/3.jpg" alt=""><p>图片3</p></li>
            <li><img src="../images/4.jpg" alt=""><p>图片4</p></li>
            <li><img src="../images/5.jpg" alt=""><p>图片5</p></li>
        </ul>
    </div>
</body>
</html>