实现商品展示抽屉效果 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>
相关推荐
前端小书生8 小时前
React 组件渲染
前端·react.js
sjd_积跬步至千里8 小时前
CSS实现文字横向无限滚动效果
前端
维他AD钙8 小时前
前端基础避坑:3 个实用知识点的简单用法
前端
journs8 小时前
micro-app微前端styled-components CSSOM模式 应用切换样式丢失问题
前端
呼啦啦小魔仙8 小时前
elpis项目DSL设计分享
前端
李李记8 小时前
别让 “断字” 毁了 Canvas 界面!splitByGrapheme 轻松搞定非拉丁文本换行
前端·canvas
来金德瑞8 小时前
快速掌握 ProseMirror 的核心概念
前端
ygria8 小时前
样式工程化:如何实现Design System
前端·前端框架·前端工程化
墨渊君9 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
huabuyu10 小时前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端