实现 抽屉效果 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>
相关推荐
IT_陈寒10 小时前
Java的Optional差点让我掉坑里,这几个坑你别踩
前端·人工智能·后端
粉嘟小飞妹儿10 小时前
JavaScript对象创建的几种灵活方法
前端
前端小万10 小时前
2026年了,为什么我突然开始做GZH?
前端
子兮曰10 小时前
Harness 驾驭工程深度教程:从 AGENTS.md 到全链路 AI 编码基础设施
前端·后端·ai编程
木子雨廷11 小时前
Flutter 桌面小组件开发
前端·flutter
还有多久拿退休金11 小时前
我在自家页面嵌了个 iframe,结果对方说"你不配"——跨域和 CSP 的那些坑
前端·架构
Awu122711 小时前
🍎Google Stitch :用自然语言做 UI 设计,把设计师的活也抢了
前端·aigc·ai编程
竹林81811 小时前
从“连接不上”到“交易成功”:我用 @solana/web3.js 在 React 中搞定 Solana 钱包交互的全过程
前端
YouCanYouUp.11 小时前
掌控感心理学解析:人类最底层的心理需求
前端
wyc是xxs11 小时前
浏览器解析HTML头部的底层逻辑
前端·html