当前位置：首页 > news >正文

CSS【实战】抽屉动画

news 2026/5/17 2:00:59

效果预览

在这里插入图片描述

技术要点

实现思路

元素固定布局（fixed）在窗口最右侧外部
js 定时器改变元素的 right 属性，控制元素移入，移出

过渡动画 transition

transition: 过渡的属性 过渡的持续时间 过渡时间函数 延迟时间

此处改变的是 right 属性，过渡动画的写法为

transition: right 0.3s;

盒模型

推荐用 IE 盒模型，方便控制元素的定位，避免添加 padding 后的误判。

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS 抽屉</title><style>#drawer-container {background-color: rgb(51, 172, 242);color: white;padding: 10px;box-sizing: border-box;width: 300px;height: 100%;position: fixed;right: -300px;top: 0;transition: right 0.3s;}</style></head><body><div id="drawer-container">抽屉里的内容</div><script>const drawerContainer = document.getElementById("drawer-container");setTimeout(() => {drawerContainer.style.right = "0px";}, 1000);setTimeout(() => {drawerContainer.style.right = "-300px";}, 3000);</script></body>
</html>

CSS【实战】抽屉动画

效果预览技术要点实现思路元素固定布局（fixed）在窗口最右侧外部js 定时器改变元素的 right 属性，控制元素移入，移出过渡动画 transition transition: 过渡的属性过渡的持续时间过渡时间函数延迟时间此处改变的是 right …...

编程日记 2024/6/18 23:29:55

【Linux Vim的保姆级教程】

🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者，CSDN实力新星，CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益，如有不足之处，欢迎在评论区提出指正，让我们共…...

编程日记 2024/6/18 23:28:54

力扣668.乘法表中第k小的数二分查找是否有k个比mid小的数 class Solution {public:int findKthNumber(int m, int n, int k) {auto check [&](int mid) -> bool{int res0;int row 1,col n;while(row < m){if(row * col < mid){res col;if(res > k) re…...

编程日记 2024/6/18 23:27:52

css伪类和伪元素选择器

伪类选择器关注元素的状态和条件，而伪元素选择器则关注元素的视觉表现和扩展。两者都是CSS中强大的工具，能够帮助开发者实现复杂的样式布局和交互效果。伪类选择器伪类选择器在CSS中用于选择元素的特定状态或位置。以下是一些常见的伪类选择器及其使…...

编程日记 2024/6/18 23:26:51

第壹章第15节 C#和TS语言对比-泛型

C#提供了泛型的完整支持，不仅在编译时，运行时仍然保留泛型的类型信息，同时提供了更加丰富的泛型约束和更加全面的协变逆变支持。TS的泛型，在语法表现形式上，和C#差不多，但本质上两者是不一样的。TS的泛型&a…...

编程日记 2024/6/18 23:25:50

苹果电脑下载vite包错

苹果电脑下载vite包错/Users/lili/.npm/_cacache/index-v5/c5/50/b451703d03b3802b9ee6b7ff2b0bde4de7f26830eb52c904d6911c137cf8包错解决方式解决方式：sudo chown -R 501:20 "/Users/wangxin/.npm"...

编程日记 2024/6/18 23:24:48

自动化测试git的使用

git是一款分布式的配置管理工具。本文主要讲git如何在自动化测试中安装，上传及拉取下载代码。 1 、git 介绍每天早上到公司，从公司的git服务器上下载最新的代码，白天在最新的代码基础上，编写新的代码，下班时把“代码…...

编程日记 2024/6/18 23:23:47

MyBatis系列四: 动态SQL

动态SQL语句-更复杂的查询业务需求官方文档基本介绍案例演示if标签应用实例where标签应用实例choose/when/otherwise应用实例foreach标签应用实例trim标签应用实例[使用较少]set标签应用实例[重点]课后练习上一讲, 我们学习的是 MyBatis系列三: 原生的API与配置文件详解现在…...

编程日记 2024/6/18 23:22:45

Jenkins构建 Maven项目（微服务）并自动发布

前面讲了docker 安装Jenkins和gitlab代码管理工具，接下来我们讲一下Jenkins怎么构建 Maven项目。 1. 首先Jenkins配置下面3中工具类首先是在本地安装三个jenkins自动配置相关的工具 1.1 JDK 由于我们使用docker来启动jenkins，其自带有jdk，…...

编程日记 2024/6/18 23:21:43

简单易用的多功能图床Picsur

什么是 Picsur ？ Picsur 是一款易于使用、可自行托管的图片分享服务，类似于 Imgur，并内置转换功能。支持多种格式的图片，包括 QOI、JPG、PNG、WEBP（支持动画）、TIFF、BMP、GIF（支持动画&#xf…...

编程日记 2024/6/18 23:20:42

数据库-查询语句习题

SELECT Sname 姓名,year of birth: 出生年,YEAR(GETDATE())-Sage BIRTHYEAR,LOWER(SNAME) SNAME --起别名没有特殊字符不需要引号，有特殊字符要加引号；别名（解释作用显示给用户看）用空格或as连接 FROM STUDENT; --消除重复行 DI…...

编程日记 2024/6/18 23:19:41

进程间通信以及线程的同步互斥机制

1.进程间通信机制常用的六种通信机制： 管道、消息队列、共享内存、信号灯集、信号、Socket 管道（Pipe）和无名管道（匿名管道）： 管道是一种半双工的通信方式，数据只能单向流动，通常…...

编程日记 2024/6/18 23:18:40

优思学院｜做车企的质量工程师转行跳槽能干嘛？

前言质量工程师，是现代制造业和服务业中不可或缺的重要角色。他们负责制定和执行提高产品质量和优化业务流程的战略。这不仅涉及设立质量标准、开发测试系统，还包括记录生产过程中的问题并找到解决方案。尤其在汽车行业，由于对质量的高度要…...

编程日记 2024/6/18 23:15:37

ctfshow-web入门-命令执行（web53-web55）

目录 1、web53 2、web54 3、web55 1、web53 这里的代码有点不一样，说一下这两种的区别： （1）直接执行 system($c); system($c);这种方式会直接执行命令 $c 并将命令的输出直接发送到标准输出（通常是浏览器&#xff…...

编程日记 2024/6/18 23:13:34

【INTEL（ALTERA）】make： nios2-swexample-create：未找到命令

目录说明解决方法说明由于外部内存接口英特尔 Stratix 10 FPGA IP 出现问题，如果在 Windows 平台上使用英特尔 Quartus Prime Pro Edition Software v20.4 或更早版本的"使用软Nios处理器进行片上调试"选项，编译Nios II 片上处理器调试…...

编程日记 2024/6/18 23:12:33

一周刷爆leetcode！（b站视频）

文章目录一、排序思想的题目二、使用步骤1. 一、排序思想的题目跟着b站一周刷爆leetcode这个视频开始刷一下leetcode的题目进行一下记录啥的二、使用步骤 1. 315. 计算右侧小于当前元素的个数代码如下： 写了一下暴力解法，没有通过使用归并排序…...

编程日记 2024/6/18 23:11:31

1.xshell传不了文件输出0000如何解决.....2.k8s中metalLB文件内容

xshell传不了文件输出0000如何解决 centos版本 1,因为没有工具下载即可 yum -y install lrzszk8s中metalLB文件内容 2.metalLB文件内容 cat metallb-native.yaml apiVersion: v1 kind: Namespace metadata:labels:pod-security.kubernetes.io/audit: privilegedpod-securit…...

编程日记 2024/6/18 23:09:29

01- ES6语法

1.ES6相关概念 1.1 什么是ES6 1.1.1 简介 ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。 ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 Ja…...

编程日记 2024/6/18 23:08:28

STM32MP135裸机编程：配置RCC，修改主频到1GHz

0 工具准备 STM32CubeMX v6.11.1 STM32CubeIDE v1.15 STM32CubeProgrammer v2.16.0 STM32MP13xx参考手册 STM32MP13勘误手册 STM32MP135AD数据手册正点原子stm32MP135开发板 1 确认时钟源本例使用的时钟源均由外部晶振提供，分别是24MHz的HSE、32.768KHz的LSE。原…...

编程日记 2024/6/18 23:07:26

观察 jvm 运行时数据区内存大小(native memory tracking)

jvm 运行时数据区 jvm 运行时数据区包括且不限于以下几个部分: 堆(heap): 用于存储对象实例和数组。堆内存的分配和释放由垃圾回收器进行管理。方法区(method area): 用于存储类的信息、静态变量、常量等。jdk 8 后方法区位于 metaspace。虚拟机栈(vm stack): 用于存储方法的…...

编程日记 2024/6/18 23:06:25

别再只用高斯噪声了！手把手教你为DDPG算法注入‘惯性’：Ornstein-Uhlenbeck噪声的Python实现与调参实战

突破DDPG探索瓶颈：Ornstein-Uhlenbeck噪声的工程实践指南在机器人控制或自动驾驶仿真这类连续动作空间的任务中，DDPG算法常因探索效率低下导致训练停滞。当智能体在MuJoCo环境中反复"原地踏步"时，问题往往不在于算法本身&#xf…...

编程新知 2026/5/17 1:47:34

告别3D-DNA的卡顿：用Chromap+Yahs快速搞定植物Hi-C辅助组装（附完整代码）

植物基因组Hi-C辅助组装新方案：ChromapYahs全流程解析在植物基因组研究中，Hi-C技术已成为提升组装连续性的重要手段。然而传统3D-DNA流程在植物数据上的表现常令研究者头疼——运行速度缓慢、内存占用高，且对植物特有的重复序列处理效果欠佳…...

编程新知 2026/5/17 0:41:06

基于ChatGPT与飞书开放平台构建企业级智能聊天机器人实践指南

1. 项目概述：当ChatGPT遇上飞书，打造你的专属智能工作伙伴最近在折腾一个挺有意思的项目，叫“chatgpt-for-chatbot-feishu”。简单来说，这就是一个桥梁，一个能让OpenAI的ChatGPT模型，直接接入到飞书&…...

编程新知 2026/5/16 23:51:21

手工打造柔性LED眼罩：从SMD焊接入门到可穿戴电路实践

1. 项目概述：从零打造你的赛博格之眼如果你和我一样，对《银翼杀手》里那些闪烁着冷光的义眼，或是赛博朋克美学中标志性的发光装饰着迷，那么亲手制作一个属于自己的LED眼罩，绝对是一次令人兴奋的旅程。这不仅仅是一个酷…...

编程新知 2026/5/16 23:45:11

taotoken api密钥的精细化管理与审计日志功能实践

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 Taotoken API密钥的精细化管理与审计日志功能实践 1. 引言在团队或企业环境中使用大模型服务时，API密钥的管理与安全…...

编程新知 2026/5/16 23:20:04

msphpsql与现代化PHP框架集成指南：Laravel、Symfony等主流框架的完整配置方案

msphpsql与现代化PHP框架集成指南：Laravel、Symfony等主流框架的完整配置方案【免费下载链接】msphpsql Microsoft Drivers for PHP for SQL Server 项目地址: https://gitcode.com/gh_mirrors/ms/msphpsql Microsoft Drivers for PHP for SQL Server&#…...

编程新知 2026/5/16 21:30:42