通过定位和css3里的transform实现鼠标经过卡片动态滑动的效果

最新推荐文章于 2022-07-08 14:53:50 发布

指尖跃动smile

最新推荐文章于 2022-07-08 14:53:50 发布

阅读量492

点赞数 1

分类专栏： Css 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/h_el_lo/article/details/121374122

版权

Css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现效果
html页面

<body>
    <div class="box">
        <div class="item">
            <div class="hover">
                hello
            </div>
        </div>
        <div class="item">
            <div class="hover">
                hello
            </div>
        </div>
        <div class="item">
            <div class="hover">
                hello
            </div>
        </div>
        <div class="item">
            <div class="hover">
                hello
            </div>
        </div>
        <div class="item">
            <div class="hover">
                hello
            </div>
        </div>
    </div>
</body>

css页面

 <style>
        .box {
            height: 200px;
        }
        .item {
            position: relative;
            float: left;
            width: 200px;
            height: 200px;
            margin: 20px 40px;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        .hover {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 200px;
            height: 45px;
            background: gold;
            opacity: .6;
            transform: translateY(45px);
            transition: ease-out .3s;
        }
        .item:hover .hover{
            transform: translateY(0);
        }
    </style>

指尖跃动smile

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
通过定位和css3里的transform实现鼠标经过卡片动态滑动的效果

实现效果html页面<body> <div class="box"> <div class="item"> <div class="hover"> hello </div> </div> <div class="item"> <div class..
复制链接

扫一扫

专栏目录