实现 抽屉效果 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>
相关推荐
jktantan12 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
2601_9628857213 小时前
quotes 字段全解:涨跌幅、振幅、换手率的口径与单位
java·前端·spring
excel13 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓13 小时前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人14 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全
开开心心_Every14 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
networknomad14 小时前
OpenReplay:自己搭的会话回放工具,给前端排错用的
前端·其他
缓慢更新15 小时前
AI 辅助生成单测:从接口定义到用例的流水线
java·服务器·前端·网络·数据库·人工智能
陈随易15 小时前
AI 运维服务器,安全又可靠的方法
前端·后端·程序员
风骏时光牛马16 小时前
AI稳定性治理体系构建与疑难问题深度分析
前端