实现 抽屉效果 css3

css 复制代码
<style>
    #box{
        width:2000px;
        height:328px; 
        overflow: hidden;
    }
    #box >div{
        width: 250px;
        height:328px;
        background-image: url('https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500');
        float: left;
        cursor: pointer;
        transition: width 1s;
    }
    #box>div:hover{
        width:889px;
    }
</style>
html 复制代码
<div id="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
相关推荐
BY组态1 天前
Ricon组态系统最佳实践:从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态
BY组态1 天前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·物联网·iot·web组态·组态
SoaringHeart1 天前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter
放下华子我只抽RuiKe51 天前
React 从入门到生产(四):自定义 Hook
前端·javascript·人工智能·深度学习·react.js·自然语言处理·前端框架
IT_陈寒1 天前
Redis缓存击穿把我整不会了,原来还有这手操作
前端·人工智能·后端
idcu1 天前
深入 Lyt.js 组件系统:L2 渲染引擎层的核心
前端·typescript
这是程序猿1 天前
Spring Boot自动配置详解
java·大数据·前端
文心快码BaiduComate1 天前
干货|Comate Harness Engineering工程实践指南
前端·后端·程序员
还有多久拿退休金1 天前
一张栈的图,治好你面试答不出 script 阻塞的病
前端·javascript
光辉GuangHui1 天前
Agent Skill 也需要测试:如何搭建 Skill 评估框架
前端·后端·llm