技术栈

实现 抽屉效果 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的内部类
相关推荐
可别390
7 分钟前
使用Worker打包报错
前端·vue.js
GIS瞧葩菜
12 分钟前
【无标题】
开发语言·前端·javascript·cesium
T___T
17 分钟前
彻底搞懂 CSS 盒子模型 box-sizing:小白也能看懂的布局核心
前端·面试
彭于晏爱编程
20 分钟前
关于表单,别做工具库舔狗
前端·javascript·面试
空白格97
20 分钟前
Android插件化开发
前端
风中凌乱的L
22 分钟前
vue canvas标注
前端·vue.js·canvas
拉不动的猪
23 分钟前
什么是二义性,实际项目中又有哪些应用
前端·javascript·面试
海云前端1
25 分钟前
Webpack打包提速95%实战:从20秒到1.5秒的优化技巧
前端
烟袅
30 分钟前
LeetCode 142:环形链表 II —— 快慢指针定位环的起点(JavaScript)
前端·javascript·算法
梦650
34 分钟前
什么是react?
前端·react.js·前端框架
热门推荐
01GitHub 镜像站点02综合整理:pdf预览显示:你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源,请打开此文件以看其内容,如何解决以正常预览文件03UV安装并设置国内源04npm使用国内淘宝镜像的方法05Linux下V2Ray安装配置指南06《大数据技术原理与应用》实验报告三 熟悉HBase常用操作07BongoCat - 跨平台键盘猫动画工具08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)10GitLab 零基础入门指南:从安装到项目管理全流程