css商品卡片上拉框样式

不会咋办

已于 2022-09-06 16:17:30 修改

阅读量397

点赞数

文章标签： css css3 html

于 2022-09-06 16:17:28 首次发布

本文链接：https://blog.csdn.net/qq_43201652/article/details/126727751

版权

HTML CSS 过渡效果用户体验前端交互

关键词由CSDN通过智能技术生成

在这里插入图片描述
上拉框效果

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .box1 {
            width: 240px;
            height: 300px;
            background-color: white;
            border: 1px solid transparent;
            padding: 10px 30px;
            box-sizing: border-box;
            margin: 30px auto;
            position: relative;
            overflow: hidden;
        }
        .box1:hover{
            border: 1px solid #27ba9b;
        }

        .box1:hover .box2{
            bottom: 0;
        }
        .p {
            width: 160px;
            height: 160px;
            margin: 0 auto;
        }

        .p img {
            width: 160px;
        }

        .p1 {
            width: 178px;
            height: 44px;
            line-height: 22px;
            margin-top: 6px;
        }

        .p2 {
            margin-top: 6px;
            width: 178px;
            height: 22px;
            line-height: 22px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            color: #666;
        }

        .q {
            margin-top: 10px;
            font-size: 20px;
            color: #cf4444;
        }
        .box2{
            width: 240px;
            height: 86px;
            padding: 0px 30px;
            box-sizing: border-box;
            background: #27ba9b;
            position: absolute;
            left: 0;
            bottom: -86px;
            transition: all .6s;
        }
        .p3{
            width: 120px;
            height: 40px;
            color: white;
            border-bottom: 1px solid white;
            text-align: center;
            line-height: 40px;
            margin: 6px auto;
            font-size: 18px;
        }
        .p4{
            width: 120px;
            height: 30px;
            text-align: center;
            line-height: 16px;
            margin: 0 auto;
            color: white;
        }
    </style>
</head>

<body>

    <div class="box1">
        <p class="p"><img src="./w4.jpg" alt=""></p>
        <p class="p1">你丐不极当是小有子君互太办母京，是的且。</p>
        <p class="p2">他学头那舟畴圣皇同耐绪，元鲜。</p>
        <p class="q">&yen;269</p>
        <div class="box2">
            <p class="p3">找相似</p>
            <p class="p4">发现更多宝贝&gt;</p>
        </div>

    </div>

</body>

</html>