技术栈

实现 抽屉效果 css3

路光.2023-12-03 18:50
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>
上一篇:Screenshot To Code
下一篇:java的内部类
相关推荐
zhangxingchao
1 小时前
Kotlin常用的Flow 操作符整理
前端
IT_陈寒
2 小时前
React的useState居然还有这种坑?我差点删库跑路
前端·人工智能·后端
Pedantic
3 小时前
SwiftUI 手势笔记
前端·后端
橙子家
4 小时前
浏览器缓存之【结构化数据库与缓存】: IndexedDB、Cache storage 和 Storage buckets
前端
user2058556151813
4 小时前
X6 中边悬浮置顶,规避 `mouseleave` 事件丢失问题
前端
李明卫杭州
4 小时前
CSS aspect-ratio 属性完全指南
前端
Pedantic
6 小时前
SwiftUI 手势层级(Gesture Hierarchy)详解
前端
飘尘
6 小时前
前端转型全栈(Java后端)的快速上手指引
前端·后端·全栈
一颗烂土豆
6 小时前
Meshopt 压缩深度解析,为什么它比 Draco 更快
前端·javascript·webgl
热门推荐
012026年6月AI行业全景:从百模大战到Agent元年,这30天发生了什么?022026年6月AI大模型全景报告:GPT-5.6、Claude Opus 4.8、Gemini 3.5,中美AI三足鼎立谁主沉浮?032026 年 AI 编程工具终极横评:Cursor vs Claude Code vs Copilot vs Windsurf04【AI】2026 年具身智能模型和世界模型总结05GitHub 镜像站点06AI科技热点日报 | 2026年6月1日07AI一周事件 · 2026-06-03 至 2026-06-09082026 AI 编程工具终极实战指南:Cursor vs Claude Code vs Copilot,开发者该怎么选?09Claude Code、Codex、Cursor三分天下:2026年AI编程Agent生态全景剖析10上线仅72小时被强制下架:Claude Fable 5 的短命