技术栈

实现 抽屉效果 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的内部类
相关推荐
牛奶
1 小时前
2026年大模型怎么选?前端人实用对比
前端·人工智能·ai编程
牛奶
1 小时前
前端人为什么要学AI?
前端·人工智能·ai编程
Kagol
3 小时前
🎉OpenTiny NEXT-SDK 重磅发布:四步把你的前端应用变成智能应用!
前端·开源·agent
GIS之路
5 小时前
ArcGIS Pro 中的 notebook 初识
前端
JavaGuide
5 小时前
7 道 RAG 基础概念知识点/面试题总结
前端·后端
ssshooter
5 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
格砸
6 小时前
从入门到辞职|从ChatGPT到OpenClaw,跟上智能时代的进化
前端·人工智能·后端
Live00000
6 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉
7 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw + 飞书(Feishu)环境搭建指南04【OpenClaw 本地实战 Ep.3】突破瓶颈:强制修改 openclaw.json 解锁 32k 上下文记忆05Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services06OpenClaw优化飞书API 额度已耗尽问题07小黑课堂计算机二级WPSoffice题库软件下载安装教程(2026年3月最新版)08Clawdbot部署教程:解决‘gateway token missing’授权问题的完整步骤09Window 10部署openclaw报错node.exe : npm error code 12810OpenClaw大龙虾机器人完整安装教程