CSS3--底部菜单上拉效果

最新推荐文章于 2021-12-15 10:15:57 发布

这个杀手好冷

最新推荐文章于 2021-12-15 10:15:57 发布

阅读量1.1k

点赞数 3

分类专栏： css

本文链接：https://blog.csdn.net/qq_43649479/article/details/106784444

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>底部菜单上拉效果</title>
        <style>
            *{
                margin: 0;
            }
            .wrap{
                width: 1200px;
                margin: 50px auto;

            }
            .wrap .item{
                width: 120px;
                height: 120px;
                border: 1px solid #ddd;
                background: url(img/1.jpg) no-repeat;
                background-size:100% 100%;
                position: relative;
                overflow: hidden;
            }
            .wrap .item .info{
                position: absolute;
                width: 100%;
                height: 40px;
                background:rgba(0,0,0,0.5);
                color: #fff;
                bottom: -40px;
                left: 0;
                transition: 0.75s all;
            }
            .wrap .item:hover .info{
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="item">
                <span class="info">斗破苍穹</span>
            </div>
        </div>
    </body>
</html>

效果图：

这个杀手好冷

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3--底部菜单上拉效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>底部菜单上拉效果</title> <style> *{ margin: 0; } .wrap{ width: 12...
复制链接

扫一扫

专栏目录