技术栈

实现 抽屉效果 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的内部类
相关推荐
xiaofeichaichai
20 分钟前
前端安全 XSS 与 CSRF
前端·安全·xss
JS菌
28 分钟前
Skills 动态加载系统:让 AI Agent 按需获取领域知识
前端·人工智能·后端
weedsfly
31 分钟前
Sass 代码复用完全指南:从变量到模块化
前端
张拭心
35 分钟前
Android 17 新特性:后台音频交互限制加强
android·前端
张拭心
44 分钟前
Android 17 新特性:ProfilingManager 新触发器
android·前端
weixin_47138303
1 小时前
Taro-03-页面生命周期
前端·javascript·taro
张拭心
1 小时前
Android 17 新特性:MessageQueue 无锁实现
android·前端
Asize
1 小时前
数组数据结构底层:从灵活到陷阱
前端·javascript·算法
十九画生
1 小时前
Ajax 入门:用 XHR 理解前后端异步请求
前端·javascript·后端
热门推荐
01HTTP 与 HTTPS 的区别:从原理到实战详解022026 AI 编程工具终极实战指南:Cursor vs Claude Code vs Copilot,开发者该怎么选?03【AI】2026 年具身智能模型和世界模型总结042026年6月AI行业全景:从百模大战到Agent元年,这30天发生了什么?05AI科技热点日报 | 2026年6月1日06《置身钉内》原文-可播放阅读07GitHub 镜像站点08Claude Code、Codex、Cursor三分天下:2026年AI编程Agent生态全景剖析092026 年 AI 编程工具终极横评:Cursor vs Claude Code vs Copilot vs Windsurf10AI一周事件 · 2026-06-03 至 2026-06-09