实现 抽屉效果 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>
相关推荐
摹客5 小时前
【3D设计】界面设计中的3D元素:应用场景+5款工具横评(含Three.js)
前端
Hilaku5 小时前
CORS 到底在保护谁?90% 的前端理解错了跨域的本质
前端·javascript·程序员
wno7045 小时前
node.js中使用jquery
前端·node.js·jquery
阿琳a_5 小时前
b-map-viewer:面向 Vue 3 的地图可视化 SDK,从接入到展示再到交互分析
前端·javascript·vue.js·gis·数据可视化·地图
10年前端老司机5 小时前
Agent 商业化困局:热闹的发布会,冷清的付费客户
前端·后端·agent
钱栈up6 小时前
热榜上手|HyperFrames:写HTML出MP4
前端·html
Sailing6 小时前
🚀🚀【封闭结束8】Agent RAG:从零搭建一个可用知识库
前端·后端·agent
Captain1314_李祖团6 小时前
5. MLIR相关语法
java·前端·javascript
恋猫de小郭6 小时前
Flutter 可以更直接地调用原生 API 了,Dart Direct Native Interop
android·前端·flutter
Data analyse4566 小时前
web-vitals库接入:LCP、INP、CLS上报与阈值
前端·javascript·数据分析