实现商品展示抽屉效果 css

css 复制代码
<style>
    #box{
        width:2000px;
        height:328px; 
        overflow: hidden;
    }
    #box >div::after{
        content: ' ';
    }
    #box >div>div{
        float: left;
        width:200px;
        border:1px solid #ffa8a8;
        box-sizing: border-box;
        height: 100%;
    }
    #box >div:nth-child(2){
        background: #f2ffcd; 
    }
    #box >div:nth-child(3){
        background: #d7d7d7; 
    }
    #box >div:nth-child(4){
        background: #c3fff4; 
    }
    #box >div{
        width: 200px;   
        height:328px;
        background: blanchedalmond;
        float: left;
        cursor: pointer;
        transition: width 1s;
    }

    #box>div:hover{
        width:800px;
    }
</style>
html 复制代码
<div id="box">
    <div>
        <div>商品封面</div>
        <div>商品1</div>
        <div>商品2</div>
        <div>商品3</div>
    </div>
    <div>
            <div>商品封面</div>
        <div>商品1</div>
        <div>商品2</div>
        <div>商品3</div>
    </div>
    <div>
            <div>商品封面</div>
        <div>商品1</div>
        <div>商品2</div>
        <div>商品3</div>
    </div>
    <div>
            <div>商品封面</div>
        <div>商品1</div>
        <div>商品2</div>
        <div>商品3</div>
    </div>
</div>
相关推荐
gzzeason几秒前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7781 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽20 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟20 分钟前
让对象保持定义的顺序来排列
前端
漫天星梦20 分钟前
前端列表页大数据内存优化的思考
前端·面试
自由逐风21 分钟前
JS 处理长整型数字的坑:从雪花 ID 精度丢失说起
javascript
爱学习的茄子22 分钟前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
云动雨颤25 分钟前
流量分发代码实战|学会用JS控制用户访问路径
javascript
欢乐时光c26 分钟前
常见请求头响应头的含义
前端·面试
wzyoung26 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js