【CSS】简单的抽屉面板展开收起自然过渡效果的css

目录

  • 效果展示
  • css
    • 固定梯形按钮至抽屉面板中间
    • 梯形按钮css
    • 过渡动画

效果展示

1.收起时点击蓝色梯形按钮展开
在这里插入图片描述
2. 展开时点击蓝色按钮收起
在这里插入图片描述
3.展开收起时需要过渡自然,有抽屉推拉效果

css

固定梯形按钮至抽屉面板中间

.toggle{ position: absolute;left:-21px;top:0;bottom:0;margin: auto 0;z-index:100;width: 15px;height: 59px;line-height: 40px;color:#fff;font-size:14px;text-align: right;cursor:pointer;padding-left: 6px;.showInfo { font-size: 11px;margin-top: 23px;}.hiddenInfo {font-size: 11px;transform: rotate(180deg);margin-top:23px;}
}

梯形按钮css

.toggle::before {content: '';position: absolute;top:0;left:0;right:0;bottom:8;z-index:-1;background:#000;background-color:#47e4ee;color:#FFFFFF;border: 1px solid #47e4ee;-webkit-transform: perspective(0.3em)rotateY(-5deg)translateX(2.38px);
}

过渡动画

.task_status {/* 这里写抽屉面板样式*/.common(250px);transition:width 0.5s;
.task_status_hidden {/* 这里写抽屉面板样式*/.common(0px);transition:width 0.5s;
}
<div className={isShowInfo ? styles.task_status : styles.task_status_hidden}><div className={styles.toggle} οnclick={()=>this.setstate({ isshowInfo: !isshowInfo })}><Icon type="double-right" className={isShowInfo ? styles.showInfo : styles.hiddenInfo} /></div>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/729088.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pdf文件超出上传大小怎么压缩?值得学习的几个方法

平时我们在使用pdf文件的时候&#xff0c;不管是上传还是进行存储&#xff0c;都会面临pdf太大的情况&#xff0c;尤其是当我们需要把pdf文件上传到一些平台上去的时候&#xff0c;那么pdf怎么压缩的小一点呢&#xff1f;为了解决这个问题&#xff0c;可以通过一些软件将pdf压缩…

关于并发编程和并行

目录 前言: 并发编程: 1.并发编程的定义: 2. 并发编程的目的 2.1提高性能&#xff1a; 2.2增强响应性&#xff1a; 2.3资源利用&#xff1a; 3. 并发编程的实现方式 3.1多线程&#xff1a; 3.2多进程&#xff1a; 3.3异步编程&#xff1a; 3.4协程&#xff1a; 4. …

【JAVA/Web】数组转对象

一. 需求 数组转对象 数组结构 List:[{id:1,code:phone,value:10101001},{id:2,code:name,value:admin},{id:3,code:address,value:XXXXXX} ]二. 数组转对象&#xff08;键值对映射关系&#xff09; 对象结构 object:{phone:10101001,name:admin,address:XXXXXX }2.1 Java…

桌搭和DIY,或许攒机才能满足宅男们的情绪价值

点击文末“阅读原文”即可参与节目互动 剪辑、音频 / 卷圈 运营 / SandLiu 卷圈 监制 / 姝琦 封面 / 姝琦Midjourney 产品统筹 / bobo 场地支持 / 声湃轩北京录音间 最近几年&#xff0c;人们突然对品牌机没有那么感兴趣了&#xff0c;反而重新开始热衷于自己动手攒机。这…

Android14音频进阶:AudioTrack如何拿到AudioFlinger创建的匿名共享内存(六十)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒体系统工程师系列【原创干货持续更新中……】🚀 人生格言: 人生从来没有捷径,只…

阿里云域名在腾讯云处做接入备案的操作流程

根据注册的相关规定&#xff0c;“谁连接谁负责”&#xff0c;所以你使用的服务器都会向服务器注册。 例如&#xff0c;您在腾讯云上购买了域名并成功注册&#xff0c;但现在切换到阿里云服务器&#xff0c;那么访问注册就必须在阿里云中进行&#xff08;PS&#xff1a;具体请参…

Jenkins集成SonarQube

文章目录 SonarQube端开启权限验证生成Jenkins登录的token Jenkins端安装SonarQube Scanner插件配置SonarQube凭证配置Jenkins的Sonar Qube信息配置SonarQube Scanner 配置项目的SonarScannerJAVA项目C#项目 效果 SonarQube端 开启权限验证 生成Jenkins登录的token 生成后记得…

如何在Linux用Docker部署MySQL数据库并远程访问本地数据库

文章目录 前言1 .安装Docker2. 使用Docker拉取MySQL镜像3. 创建并启动MySQL容器4. 本地连接测试4.1 安装MySQL图形化界面工具4.2 使用MySQL Workbench连接测试 5. 公网远程访问本地MySQL5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定TCP地址远程访问 前言 本文主…

RabbitMQ理论:RabbitMQ学习思维导图

参考资料 RabbitMQ五种消息模型

信号隔离器4-20mA一进二出直流电流电压变送模拟量输出0-10V泰华

品牌&#xff1a;泰华仪表 您需要一款这样的隔离器&#xff0c;转换精度高&#xff0c;响应速度快&#xff0c;耐压隔离高&#xff0c;三端隔离技术&#xff0c;低功耗。 DC24V供电&#xff0c;为现场的变送器提供隔离配电电源&#xff0c;同时将变送器产生的电流信号从现场…

Springboot 打成jar包后 结合idea remote 远程debug

1、将测试demo打成jar 2、 将jar放到某个目录下&#xff0c;并运行起来 java -jar -agentlib:jdwptransportdt_socket,servery,suspendn,address*:10087 base_admin-1.0.0.jar 3、在Idea中编辑Remote调试 4、在浏览器中打开刚启动的jar&#xff0c;比如我的项目地址&#x…

在NAT模式下,局域网内的其他电脑要访问使用NAT模式的虚拟机或设备

在NAT模式下&#xff0c;局域网内的其他电脑要访问使用NAT模式的虚拟机或设备 可以通过以下几种方式&#xff1a; 1、端口映射&#xff1a;在NAT模式下&#xff0c;你可以配置端口映射&#xff0c;类似于Docker中的端口映射。这样&#xff0c;局域网内的其他电脑就可以通过特…

Galxe:被低估的加密市场掘金地+Web3门户

在BTC ETF获得 SEC 的批准之后&#xff0c;机构资金大量买入推动BTC上涨&#xff0c;并带动整个加密市场回暖进入牛市。那么&#xff0c;对于习惯了熊市保守心态的投资者来说&#xff0c;接下来如何转换策略适应牛市&#xff1f;对即将进场的Web2用户来说&#xff0c;如何玩赚W…

一次简单操作代替所有异常处理

一、背景 在服务端处理前端发过来的响应的时候&#xff0c;开发者不可能穷尽用户的所有奇怪的操作。除此之外&#xff0c;我们还需要应付前端人员对我们的无情吐槽&#xff0c;你对XXXX请求返回的为啥是奇怪的响应数据呢&#xff1f;于是全局异常处理应运而生&#xff0c;一次处…

奖励建模(Reward Modeling)实现人类对智能体的反馈

奖励建模&#xff08;Reward Modeling&#xff09;是强化学习中的一个重要概念和技术&#xff0c;它主要用于训练智能体&#xff08;如AI机器人或大型语言模型&#xff09;如何更有效地学习和遵循人类期望的行为。在强化学习环境中&#xff0c;智能体通过尝试不同的行为获得环境…

C#实现插入排序算法

C#实现插入排序算法 以下是使用C#实现插入排序算法的示例代码&#xff1a; using System;class InsertionSort {static void Main(string[] args){int[] arr { 64, 25, 12, 22, 11 };Console.WriteLine("排序前&#xff1a;");PrintArray(arr);InsertionSortAlgori…

JavaScript 二分查找(迭代与递归)

二分搜索被定义为一种在排序数组中使用的搜索算法&#xff0c;通过重复将搜索间隔一分为二。二分查找的思想是利用数组已排序的信息&#xff0c;将时间复杂度降低到O(log N)。 二分查找算法示例 何时在数据结构中应用二分查找的条件&#xff1a; 应用二分查找算法&#xff1a…

阿里云k8s环境下,因slb限额导致的发布事故

一、背景 阿里云k8s容器&#xff0c;在发布java应用程序的时候&#xff0c;客户端访问出现500错误。 后端服务是健康且可用的&#xff0c;网关层大量500错误请求&#xff0c;slb没有流入和流出流量。 经过回滚&#xff0c;仍未能解决错误。可谓是一次血的教训&#xff0c;特…

[React 进阶系列] React Context 案例学习:使用 TS 及 HOC 封装 Context

[React 进阶系列] React Context 案例学习&#xff1a;使用 TS 及 HOC 封装 Context 具体 context 的实现在这里&#xff1a;[React 进阶系列] React Context 案例学习&#xff1a;子组件内更新父组件的状态。 根据项目经验是这样的&#xff0c;自从换了 TS 之后&#xff0c;…

光线追踪12 - Defocus Blur(虚焦模糊)

现在我们的最后一个特性是虚化模糊。注意&#xff0c;摄影师通常称之为景深&#xff0c;所以请确保在光线追踪的朋友中只使用虚化模糊这个术语。 真实相机具有虚化模糊是因为它们需要一个大孔&#xff08;而不仅仅是针孔&#xff09;来收集光线。一个大孔会导致所有物体失去焦点…