zy-smile

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

  • 实现效果
    在这里插入图片描述

  • 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>

posted on 2021-11-17 11:23  指尖de跃动  阅读(0)  评论(0)    收藏  举报  来源

导航