实现 抽屉效果 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>
相关推荐
無名路人12 小时前
uniApp 小程序 vue3 app.vue静默登录其他页面等待登录完成方式二
前端·微信小程序·ai编程
CoCo的编程之路12 小时前
2026 前端效能飞跃:深度解析智能助手的页面构建最大化方案
前端·人工智能·ai编程·智能编程助手·文心快码baiducomate
JavaAgent架构师12 小时前
前端AI工程化(一):AI通信协议深度解析
前端·人工智能
林恒smileZAZ12 小时前
前端如何让图片、视频、pdf等文件在浏览器直接下载而非预览
前端·pdf
孙69034212 小时前
electron播放本地任意格式的视频
前端·javascript
小小小小宇13 小时前
设计稿转代码:如何将生成代码与内部组件库关联
前端
七牛云行业应用13 小时前
别每个 AI 工具单独配了!MCP 一次搭建,Claude、Cursor、TRAE 全能用
前端
_xaboy13 小时前
FormCreate 设计器 v6.3 正式发布:AI 表单助理3.0登场!
前端·vue.js·低代码·开源·表单设计器
胡志辉13 小时前
邮件中点击“加载图片”,你的IP地址已经被泄漏
前端·后端·安全
openKaka_13 小时前
reconcileChildren 深入:React 如何根据 ReactElement 构建子 Fiber
前端·javascript·react.js