实现 抽屉效果 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>
相关推荐
wgc2k8 分钟前
NestJS基础-7: 官方 CLI 完整使用指南
前端
AI_零食17 分钟前
HarmonyOS-鸿蒙原生 ArkTS 布局系统:width(‘100%‘) 的本质与 padding 陷阱
前端·学习·华为·harmonyos·鸿蒙
英俊潇洒美少年20 分钟前
React18 flushSync 完整深度解析
前端·react
小鱼程序员24 分钟前
Reqable关于路径定位
前端
梦曦i28 分钟前
Vite 0.1.7:构建追踪与资源映射新升级
前端
qq43569470131 分钟前
Vue02
开发语言·前端·javascript
AsiaLYF38 分钟前
Kotlin MutableSharedFlow: emit vs tryEmit 详解
开发语言·前端·kotlin
喜欢踢足球的老罗39 分钟前
Chrome MV3 插件架构深度解析:Service Worker 生命周期与 Token 管理的三层博弈
前端·chrome·架构
小李云雾41 分钟前
Pinia:Vue3 全局状态管理从入门到精通
前端·javascript·vue.js
Upsy-Daisy1 小时前
Hermes Agent 学习笔记 03:CLI 与 TUI 使用体验,让 Agent 真正进入终端工作流
服务器·前端·数据库