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

CSS【实战】抽屉动画

news 文章来源：https://blog.csdn.net/weixin_41192489/article/details/139785738 2024/10/28 20:29:43

效果预览

在这里插入图片描述

技术要点

实现思路

  • 元素固定布局（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【实战】抽屉动画

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

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

【Linux Vim的保姆级教程】

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

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

力扣668.乘法表中第k小的数

力扣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伪类和伪元素选择器

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

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

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

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

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

苹果电脑下载vite包错

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

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

自动化测试git的使用

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

编程日记 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代码管理工具&#xff0c;接下来我们讲一下Jenkins怎么构建 Maven项目。 1. 首先Jenkins配置下面3中工具类 首先是在本地安装三个jenkins自动配置相关的工具 1.1 JDK 由于我们使用docker来启动jenkins&#xff0c;其自带有jdk&#xff0c;…...

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

简单易用的多功能图床Picsur

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

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

数据库-查询语句习题

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

编程日记 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&#xff0c; 全称 ECMAScript 6.0 &#xff0c;是 JavaScript 的下一个版本标准&#xff0c;2015.06 发版。 ES6 主要是为了解决 ES5 的先天不足&#xff0c;比如 JavaScript 里并没有类的概念&#xff0c;但是目前浏览器的 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 确认时钟源 本例使用的时钟源均由外部晶振提供&#xff0c;分别是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

【论文阅读】-- 时间空间化：用于深度分类器训练的可扩展且可靠的时间旅行可视化

Temporality Spatialization: A Scalable and Faithful Time-Travelling Visualization for Deep Classifier Training 摘要1 引言2 动机3 问题定义4 方法论4.1 时空复合体4.2 复数约简 5 实验6 相关工作7 结论参考文献 摘要 时间旅行可视化回答了深度分类器的预测是如何在训练…...

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

Windows系统部署本地SQL_Server指引

Windows系统部署本地SQL_Server指引 此指引文档环境为Windows10系统&#xff0c;部署SQL_Server 2019为例&#xff0c;同系列系统软件安装步骤类似。 一、部署前准备&#xff1b; 下载好相关镜像文件&#xff1b;设备系统启动后&#xff0c;将不必要的软件停用&#xff0c;避…...

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

Aptos Builder Jam 亚洲首站｜议程公布，无限畅想 Aptos 生态未来

作为一个新兴的 Layer1 公链&#xff0c;Aptos 自诞生之日起的理想便是 “A Layer 1 for everyone” 当 Web3 深陷熊市阴影之时&#xff0c;Aptos 奋力为开发者找到了全新的技术路径&#xff0c;正有 200 项目正在开发&#xff0c;并且已有大量 DeFi 项目落实部署工作&#xff…...

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

Vue3使用component动态展示组件

前言&#xff1a; 最近在研究gitHub中的一个项目并将与自己之前完成的项目进行结合&#xff0c;其中有一个功能就是需要使用根据不同的字段&#xff0c;渲染不同的组件&#xff0c;查阅资料发现可以使用component完成这个功能&#xff0c;在实现的过程中也会遇见一些坑&#x…...

编程日记 2024/6/18 23:00:16

嵌入式中间件_2.嵌入式中间件的分类

1.中间件的分类 中间件的范围十分广泛&#xff0c;针对不同的应用需求涌现出了多种各具特色的中间件产品。因此&#xff0c;在不同的角度或不同的层次上&#xff0c;对中间件的分类也会有所不同。 根据IDC在1998年对中间件进行的分类&#xff0c;把中间件分为终端仿真/屏幕转换…...

编程日记 2024/6/18 22:58:14

论文精读——KAN

目录 1.研究背景 2.关键技术 2.1 原始公式 2.2 KAN结构 2.3 缩放定律 3.技术扩展 4.模型效果 5.相关讨论 6.总结 文章标题&#xff1a;《KAN: Kolmogorov–Arnold Networks》 文章地址&#xff1a; KAN: Kolmogorov-Arnold Networks (arxiv.org)https://arxiv.org/a…...

编程日记 2024/6/18 22:57:11

全国产城市轨道交通运营公安AI高清视频监控系统

方案简介 城市轨道交通运营公安高清视频监控系统解决方案针对运营部门和公安部门的安保需求&#xff0c;选用华维视讯的各类前端和视频编解码、控制产品&#xff0c;通过统一平台提供视频监控服务和智能应用&#xff0c;满足轨道交通运营业主客运组织和抢险指挥的需求&#xff…...

编程日记 2024/6/18 22:56:10

python连接mysql数据库、FastAPI、mysql-connector-python

方法工具一、FastAPI 建议使用fast api中的pymysql pip3 install fastapi pip3 install pydantic pip3 install "uvicorn[standard]" pip3 中的3是 Python 3 版本的包管理器命令&#xff0c;用于安装和管理 Python 3 版本的第三方库。在某些系统中&#xff0c;同时…...

编程日记 2024/6/18 22:54:07

【idea】解决springboot项目中遇到的问题

一、Maven报错Could not find artifact com.mysql:mysql-connector-j:pom:unknown in aliyunmaven解决及分析 报错 创建springboot项目&#xff0c;勾选数据库驱动&#xff0c;springboot版本为3&#xff0c;现在改成了2.7.2&#xff0c;Maven就发生了报错Could not find art…...

编程日记 2024/6/18 22:53:05

ubuntu22.04禁止自动休眠的几种方式

在Ubuntu 20.04中&#xff0c;您可以通过以下几种方式禁用自动休眠功能&#xff1a; 使用systemd设置: sudo systemctl mask sleep.target suspend.target hibernate.target hybrid-sleep.target 修改/etc/systemd/logind.conf文件: sudo nano /etc/systemd/logind.conf 找…...

编程日记 2024/6/18 22:51:03

北京建设网华樾领尚规划图/企业网站优化的三层含义

1:ROC—AUC曲线 AUC&#xff1a;一个正例&#xff0c;一个负例&#xff0c;预测为正的概率值比预测为负的概率值还要大的可能性。 所以根据定义&#xff1a;我们最直观的有两种计算AUC的方法 1&#xff1a;绘制ROC曲线&#xff0c;ROC曲线下面的面积就是AUC的值(积分) 2&#x…...

编程日记 2024/10/28 17:29:05

幼儿做爰网站/想做百度推广找谁

标题 :可以是h1到h7一段话强制换行粗体&#xff0c;斜体&#xff0c;下划线&#xff0c;删除线&#xff0c;上标&#xff0c;下标&#xff0c;删除线&#xff0c;设置成打印机字体逻辑字体&#xff1a;强调文字字体加重显示编程代码显示示例文字显示键盘按键文字斜体字渲染缩小…...

编程日记 2024/10/28 15:46:39

制作绘本怎么做简易/深圳seo推广

日期处理在各种语言中都会遇到。 Python 也不例外&#xff0c;其中主要涉及到的就是日期转换&#xff0c;日期比对&#xff0c;日期输出等。 不同的日期有不同的处理方式&#xff0c;有些日期可能有时区&#xff0c;有些日期可能没有&#xff0c;根据我们的一些考古来看&…...

编程日记 2024/10/28 14:33:28

曲阜网站建设多少钱/seo外包大型公司

微信小程序更新机制 1&#xff09;小程序的启动方式&#xff1a; 冷启动----小程序首次打开或销毁后再次被打开 热启动----小程序打开后&#xff0c;在一段时间内&#xff08;目前&#xff1a;5分钟&#xff09;再次被打开&#xff0c;此时会将后台的小程序切换到前台。 2&a…...

编程日记 2024/10/28 13:53:52

一个专门做标题的网站/推广业务

我目前正在浏览URL并在访问/抓取网站时抓取数据 .有时一个网站将有一个不合理的长加载时间&#xff0c;没有错误&#xff0c;但不会完全加载&#xff0c;以允许chromedriver / urlopen完成/继续脚本&#xff0c;只是保持不稳定 .动态测试元素的存在在这种情况下不起作用&#x…...

编程日记 2024/10/28 10:54:03

广西建设职业学院官网网站/百度深圳总部

git bash的简单设置&#xff0c;使用ls命令时&#xff0c;可以显示中文。 命令&#xff1a;alias lsls --show-control-chars --colorauto 说明&#xff1a;alias,别名。功能非常强大&#xff0c;可以把复杂的操作设置一个别名&#xff0c;然后就可以非常方便的使用此操作了。…...

编程日记 2024/10/28 10:04:20