手风琴html

最新推荐文章于 2022-07-13 21:23:25 发布

小白白中之白

最新推荐文章于 2022-07-13 21:23:25 发布

阅读量114

点赞数

分类专栏：网页案例网页笔记

本文链接：https://blog.csdn.net/m0_53438035/article/details/116140364

版权

网页笔记同时被 2 个专栏收录

41 篇文章 2 订阅

订阅专栏

网页案例

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        background-image: linear-gradient(#78f, #f78);
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
    }
    .box ul{
        overflow: hidden;
        /* width=5*200，hover可重新定义宽度 */
    }
    .box ul li{
        width: 200px;
        height: 320px;
        float: left;
        list-style: none;
        position: relative;
    }
    .box ul li p{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        line-height: 320px; 
        font-size: 14px; 
        background-color: rgba(0, 0, 0, .3);
        text-align: center;
        
        font-weight: 700;
        color: white;
    }
    .box ul li:hover p{
        font-size: 20px;
        line-height: 30px;
        transition: all .3s;
    }
    .box ul:hover li{
        width: 90px;
        transition: all .3s;

    }
    .box ul li:hover{
        width: 640px;
        transition: all .3s;
    }
   /*  .box ul li:not(:hover){
        width: 90px;
        transition: all .3s;
    } */
    
    
    
    </style>
</head>
<body>
    <div class="box">
        <ul>
          <li>
            <img src="C:\Users\CJ\Desktop\images/1.jpg" alt="" />
            <p>玩具总动员</p>
          </li>
          <li>
            <img src="C:\Users\CJ\Desktop\images/2.jpg" alt="" />
            <p>汽车总动员</p>
          </li>
          <li>
            <img src="C:\Users\CJ\Desktop\images/3.jpg" alt="" />
            <p>仙境的彼方</p>
          </li>
          <li>
            <img src="C:\Users\CJ\Desktop\images/4.jpg" alt="" />
            <p>飞屋环游记</p>
          </li>
          <li>
            <img src="C:\Users\CJ\Desktop\images/5.jpg" alt="" />
            <p>机器人总动员</p>
          </li>
        </ul>
      </div>
</body>
<script>
    
</script>
</html>