技术栈

实现 抽屉效果 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的内部类
相关推荐
一个假的前端男
3 小时前
uniapp 3端轮播
前端·javascript·uni-app
Fantasydg
5 小时前
Request Response对象
前端
Wect
5 小时前
学习React-DnD:核心组件与Hooks
前端
humors221
5 小时前
前端开发案例(不定期更新)
前端·vue.js·elementui·ruoyi·若依
菠萝+冰
5 小时前
npm中-d -g 和默认安装的区别
前端·npm·node.js
一个打工仔的笔记
5 小时前
使用css实现打开抽屉效果(css过渡动画)
css
一路向北North
5 小时前
网页版预编译SQL转换工具
前端·javascript·sql
拿不拿铁19
6 小时前
Vite 5.x 开发模式启动流程分析
前端
fruge
6 小时前
设计稿还原技巧:解决间距、阴影、字体适配的细节问题
前端·css
BBB努力学习程序设计
7 小时前
了解响应式Web设计:viewport网页可视区域
前端·html
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)05Linux下V2Ray安装配置指南06综合整理:pdf预览显示:你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源,请打开此文件以看其内容,如何解决以正常预览文件07jdk21下载、安装(Windows、Linux、macOS)08智能库存管理的需求预测模型:从业务痛点到落地代码的完整实践09Labelme从安装到标注:零基础完整指南10使用国内镜像网站在线下载安装Qt(解决官网慢的问题)——Qt