实现商品展示抽屉效果 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>
相关推荐
快起来别睡了几秒前
看完你就知道JavaScript 中的对象创建与继承方式原来这么简单?!
javascript
乌兰麦朵10 分钟前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai10 分钟前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
Code季风11 分钟前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
蓝倾11 分钟前
如何使用API接口实现淘宝商品上下架监控?
前端·后端·api
舂春儿13 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸13 分钟前
⚡ 从浏览器到编辑器只需1秒,这个React定位工具改变了我的开发方式
前端
Pedantic13 分钟前
我们什么时候应该使用协议继承?——Swift 协议继承的应用与思
前端·后端
Software攻城狮14 分钟前
vite打包的简单配置
前端
Codebee14 分钟前
如何利用OneCode注解驱动,快速训练一个私有的AI代码助手
前端·后端·面试