css 鼠标滑过列表上移效果

最新推荐文章于 2025-03-28 16:26:06 发布

搬砖人不骗搬砖人

最新推荐文章于 2025-03-28 16:26:06 发布

阅读量497

点赞数

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/m0_48478236/article/details/126083341

版权

<!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>
</head>
<style>
    *{
        padding: 0%;
        margin: 0%;
    }
    .div1{
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background: url("img/background.webp") no-repeat center top;
    }

.act-item{
    width:193px;
    height:278px;
    -webkit-transition:transform .3s;
    transition:transform .3s;
    -webkit-transform:translateY(0);
    transform:translateY(0);
    background-color:#fefefe;
}
.act-item>img{display:block;width:193px;height:207px}
.act-item>.overtime{position:absolute;font-size:12px;color:#1da6ba;left:10px;bottom:6px}
.act-item>p{width:100%;overflow:hidden;box-sizing:border-box;padding:6px 10px 4px 10px;font-size:14px;color:#424242;line-height:18px;text-align:left}
.act-item>.innerhover-border{background:url("./img/dark70-bg-repeat.png") repeat;display:none;width:193px;height:207px;line-height:207px;position:absolute;top:0;left:0;text-align:center}
.act-item>.innerhover-border .hover-border-1{display:block;position:absolute;left:50%;margin-left:-94px;top:50%;margin-top:-100px;background-position:0 0;width:188px;height:200px}
.act-item>.innerhover-border .innerhover-border-inner{display:inline-block;vertical-align:middle;*zoom:1;*display:inline;position:relative;line-height:1.5;padding:0 10px}
.act-item>.innerhover-border .p1{font-size:16px;font-weight:400;color:#cdbe91}
.act-item>.innerhover-border .p2{font-size:12px;color:#9d9c9c;max-height:73px;overflow:hidden}
.act-item:hover{
    -webkit-transform:translateY(-10%);transform:translateY(-10%)
}
.act-item:hover>p{color:#0da0b4}
.act-item:hover>.innerhover-border{display:block;animation:bottomIn .2s;-webkit-animation:bottomIn .2s}
</style>
<body>
    <div class="div1">
        <div class="act-item">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp06%2F20111116192A364-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661828516&t=d32e4987556a68185d1bc231266c74e1" alt="夺冠图标表情领取" width="193" height="207">
            <p>夺冠图标表情领取</p>
            <a class="overtime">长期活动</a>
            <div class="innerhover-border">
                <i class="hover-border-1"></i>
                <div class="innerhover-border-inner">
                  <h4 class="p1">每周特惠</h4>
                  <p class="p2">每周特惠</p>
                  <p class="p2">开启时间: 2022-07-30</p>
                </div>
              </div>
        </div>

    </div>
</body>
</html>