css实现帘幕效果

风与烈酒

于 2023-10-10 20:42:07 发布

阅读量115

点赞数 1

文章标签： css tensorflow 前端

本文链接：https://blog.csdn.net/qingdouxiaohua/article/details/133755582

版权

帘幕效果：鼠标放上去实现，会感觉一个像帘子一样的东西慢慢放下来（也可以升上去，把里面两个bottom换成top就可以了），这就是帘幕效果。

HTML:

<body>
        <div id="ml"><b>帘子</b></div>
        <div class="kk">
            <div>
                <img src="https://pic.imgdb.cn/item/652541d4c458853aefb3d753.webp" alt="">
                <p>海绵宝宝</p>
            </div>
            <div>
                <img src="https://pic.imgdb.cn/item/652541efc458853aefb3db23.png" alt="">
                <P>蟹老板</P>
            </div>
            </div>
    </body>

css：

        <meta charset="utf-8" />
        <title></title>
        <style>
            #ml{
                text-align: center;
                font-size: 30px;
                
            }
            .kk{
                width: 1250px;
                height: 900px;
            }
            .kk>div{
                width: 500px;
                height: 400px;
                float: left;
                margin: 30px 30px;
                position: relative;
                overflow: hidden;
            }
            .kk>div>img{
                width: 100%;
                height: 100%;
                
            }
            .kk>div>p{
                width: 100%;
                height: 100%;
                position: absolute;
                bottom: 100%;
                line-height: 400px;
                background-color: rgba(0, 0, 0, 0.5);
                font-size: 20px;
                color: white;
                text-align: center;
                transition: 2.5s;
            }
            .kk>div:hover>p{
                bottom: 0;
            }
            
        </style>