实现 抽屉效果 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>
相关推荐
大气的小蜜蜂39 分钟前
领域层的服务
java·前端·数据库
星栈43 分钟前
LiveView 的 LiveComponent:比 React 组件更轻,但我一开始真的把它用错了
前端·前端框架·elixir
林希_Rachel_傻希希1 小时前
web性能优化之延迟加载图片和<inframe>
前端·javascript·面试
maxmaxma1 小时前
Konva 从入门到实践 - day1
前端
火星校尉1 小时前
一场数据基建与消费场景的跨界实验
java·前端·数据库·python·php
W是笔名1 小时前
python_let`s try it 6___BMI计算器
java·前端·python
risc1234561 小时前
Lucene80DocValuesConsumer 五种类型源码阅读顺序
java·服务器·前端
小米渣的逆袭2 小时前
Chrome Extension Script World(ISOLATED / MAIN)原理与适用场景
前端·javascript·chrome
微信开发api-视频号协议2 小时前
Codex++安全边界探秘:从模型能力到风险防御
前端·安全·微信·企业微信
想你依然心痛2 小时前
AtomCode 在前端开发中的实战体验:React + TypeScript 项目开发实录
前端·react.js·typescript