【CSS3】化神篇

目录

  • 平面转换
    • 平移
    • 旋转
    • 改变旋转原点
    • 多重转换
    • 缩放
    • 倾斜
  • 渐变
    • 线性渐变
    • 径向渐变
  • 空间转换
    • 平移
    • 视距
    • 旋转
    • 立体呈现
    • 缩放
  • 动画
    • 使现步骤
    • animation 复合属性
    • animation 属性拆分
    • 逐帧动画
    • 多组动画

平面转换

作用:为元素添加动态效果,一般与过渡配合使用

概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜)

平面转换又叫 2D 转换

属性名:transform

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{margin: 100px 0;width: 100px;height: 100px;background-color: #e08b8b;transition: all 1s;}div:hover{transform: translate(700px) rotate(360deg) scale(2) skew(360deg);}</style>
</head>
<body><div></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-13 153147

平移

属性名:transform: translate(X轴移动距离, Y轴移动距离);

属性值:

  • 像素单位数值
  • 百分比(参照盒子自身尺寸计算结果)
  • 正负均可

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{width: 500px;height: 300px;margin: 100px auto;border: 1px solid black;}.son{width: 200px;height: 100px;background-color: antiquewhite;transition: all 0.5s;}.father:hover .son{transform: translate(150%,200%);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-13 154956

注意事项:

  • translate() 只写一个值,表示沿着 X 轴移动
  • 单独设置 X 或 Y 轴移动距离:translateX() 或 translateY()

旋转

属性名:transform: rotate(旋转角度);

属性值:

  • 角度单位是 deg
  • 取值正负均可
  • 取正顺时针旋转,取负逆时针旋转

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{width: 200px;transition: all 1s;}img:hover{transform: rotate(360deg);}</style>
</head>
<body><img src="./img/3.jpg" alt="">
</body>
</html>

结果如下:

屏幕录制 2025-03-13 162633

改变旋转原点

默认情况下,旋转远点是盒子中心点

属性名:transform-origin: 水平原点位置 垂直原点位置;

属性值:

  • 方位名称(left、top、right、bottom、center)
  • 像素单位数值
  • 百分比

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{width: 200px;transition: all 1s;transform-origin: right bottom;}img:hover{transform: rotate(360deg);}</style>
</head>
<body><img src="./img/3.jpg" alt="">
</body>
</html>

结果如下:

屏幕录制 2025-03-13 163957

多重转换

先平移再旋转

属性名:transform: translate() rotate();

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 1200px;height: 200px;border: 1px solid black;}img{width: 200px;transition: all 4s;}div:hover img{transform: translateX(500%) rotate(360deg);}</style>
</head>
<body><div><img src="./img/4.jpg" alt=""></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-13 165216

注意事项:

  • 不能先旋转再平移,因为旋转会改变坐标轴向
  • 复合属性不能分开写,否则后面的属性会覆盖前面的属性

缩放

属性名:

  • transform: scale(缩放倍数);
  • transform: scale(X轴缩放倍数, Y轴缩放倍数);

属性值:

  • 通常只为 scale() 设置一个值,表示 X 轴和 Y 轴等比例缩放
  • 取值大于 1 表示放大,取值小于 1 表示缩小

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 143px;margin: 100px auto;}img{width: 200px;transition: all 4s;}div:hover img{transform: scale(2);}</style>
</head>
<body><div><img src="./img/4.png" alt=""></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-13 171831

倾斜

属性名:transform: skew();

属性值:

  • 角度度数 deg
  • 取正向左倾斜,取负向右倾斜

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 143px;margin: 100px auto;}img{width: 200px;transition: all 2s;}div:hover img{transform: skew(30deg)}</style>
</head>
<body><div><img src="./img/4.png" alt=""></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-13 174606

渐变

渐变是多个颜色逐渐变化的效果,一般用于设置盒子背景

线性渐变

属性名:

background-image: linear-gradient(渐变方向,颜色1 终点位置,颜色2 终点位置,......
);

属性值:

  • 渐变方向:(可选)
    • to 方位名词
    • 角度度数
  • 终点位置:(可选)
    • 百分比

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: #a0adf7;background-image: linear-gradient(45deg, red,#f8a4a4,#a0adf7);}</style>
</head>
<body><div></div>
</body>
</html>

结果如下:
在这里插入图片描述

径向渐变

作用:给按钮添加高光效果

属性名:

background-image: radial-gradient(半径 at 圆心位置,颜色1 终点位置,颜色2 终点位置,......
);

属性值:

  • 半径可以是两条,则为椭圆
  • 圆心位置取值:像素单位数值/百分比/方位名词

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: pink;border-radius: 50%;background-image: radial-gradient(50px at center center,red,pink);}button{width: 100px;height: 40px;background-color: purple;border: 0;border-radius: 5px;color: white;background-image: radial-gradient(30px at center center,rgba(255,255,255,0.2),transparent);}</style>
</head>
<body><div></div><button>按钮</button>
</body>
</html>

结果如下:
在这里插入图片描述

空间转换

空间:是从坐标轴角度定义的 X、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴与视线方向相同

空间转换也叫 3D 转换

属性:transform

平移

属性名:

  • transform: translate3d(x,y,z);
  • transform: translateX();
  • transform: translateY();
  • transform: translateZ();

属性值:

  • 像素单位数值
  • 百分比(参照盒子自身尺寸计算结果)

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover{transform: translate3d(100px,200px,300px);}</style>
</head>
<body><div class="box"></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-13 194159

注意事项:默认无法观察 Z 轴平移效果

视距

作用:制定了观察者与 z=0 平面的距离,为元素添加透视效果

透视效果:近大远小、近实远虚

属性名:perspective: 视距;

属性值:

  • 添加给父级,取值范围 800-1200

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{perspective: 1000px;}.son{width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5;}.son:hover{transform: translateZ(-300px);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-13 195356

旋转

属性名:

transform: rotateZ() 沿着 Z 轴旋转

transform: rotateX() 沿着 X 轴旋转

transform: rotateY() 沿着 Y 轴旋转

transform: rotate3d(x,y,z,角度度数); x,y,z 取值为 0-1 之间的数字

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;margin: 100px auto;perspective: 1000px;}img{width: 200px;transition: all 2s;}.d1 img:hover{transform: rotateZ(360deg);}.d2 img:hover{transform: rotateX(60deg);}.d3 img:hover{transform: rotateY(60deg);}</style>
</head>
<body><div class="d1"><img src="./img/3.jpg" alt=""></div><div class="d2"><img src="./img/1.png" alt=""></div><div class="d3"><img src="./img/2.png" alt=""></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-13 201450

左手法则

根据旋转方向确定取值正负

左手握住旋转轴,拇指指向正值方向,其他四个手指弯曲方向为旋转正值方向
在这里插入图片描述

立体呈现

作用:设置元素的子元素是位于 3D 空间中还是平面中

属性名:transform-style

属性值:

  • flat:子级处于平面中
  • preserve-3d:子级处于 3D 空间中

呈现立体图形步骤:

  1. 父元素添加 transform-style: preserve-3d;
  2. 子级定位
  3. 调整子盒子的位置(位移或旋转)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.cube{position: relative;width: 200px;height: 200px;margin: 100px auto;/* background-color: pink; */transition: all 1s;transform-style: preserve-3d;}.cube div{position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front{background-color: orange;transform: translateZ(100px);}.back{background-color: green;transform: translateZ(-100px);}.cube:hover{transform: rotateY(90deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-13 213518

缩放

属性名:

  • transform: scale3d(x,y,z);
  • transform: scaleX();
  • transform: scaleY();
  • transform: scaleZ();

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.cube{position: relative;width: 200px;height: 200px;margin: 100px auto;/* background-color: pink; */transition: all 4s;transform-style: preserve-3d;transform: scale3d(1.5,2,3);}.cube div{position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front{background-color: orange;transform: translateZ(100px);}.back{background-color: green;transform: translateZ(-100px);}.cube:hover{transform: rotate3d(1,1,1,90deg);}</style>
</head>
<body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-13 220517

动画

过渡:实现两个状态间的变化过程

动画:实现多个动态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.d1{width: 1000px;height: 200px;border: 1px solid black;}.d2{width: 200px;height: 200px;background-color: pink;animation: change 1s infinite alternate;}@keyframes change {0% {transform: translate(0);}100% {transform: translate(800px);}}</style>
</head>
<body><div class="d1"><div class="d2"></div></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-13 221903

使现步骤

定义动画

  • 两个状态
@keyframes 动画名称 {from {}to {}
}
  • 多个状态
@keyframes 动画名称 {0% {}10% {}......100% {}
}

使用动画

animation: 动画名称 动画花费时长;

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: pink;animation: change 10s;}@keyframes change {0% {width: 200px;height: 200px;}25% {width: 400px;height: 200px;}75% {width: 400px;height: 400px;}100% {border-radius: 50%;}}</style>
</head>
<body><div></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-13 235715

animation 复合属性

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

  • 速度曲线:
    • linear:匀速运动
    • steps():括号里填数字,表示分几步完成动画
  • 重复次数:
    • infinite:无限循环重复播放
  • 动画方向:
    • alternate:反向执行
  • 执行完毕时状态:
    • backwards:开始状态
    • forwards:结束状态

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 100px;background-color: pink;animation:  change 1s linear 1s 3 alternate forwards;}@keyframes change {from {width: 200px;}to {width: 800px;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-14 002430

注意事项:

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值,第一个时间值表示动画时长,第二个时间值表示延迟时间

animation 属性拆分

属性作用取值
animation-name动画名称
animation-duration动画时长
animation-delay延迟时间
animation-fill-mode动画执行完毕时状态forwards:最后一帧状态
backwards:第一帧状态
animation-timing-function速度曲线steps (数字):逐帧动画
animation-iteration-count重复次数infinite 为无限循环
animation-direction动画执行方向alternate 为反向
animation-play-state暂停动画paused 为暂停,通常配合:hover 使用

逐帧动画

核心原理:

  • steps() 逐帧动画
  • CSS 精灵图

精灵动画制作步骤:

  1. 准备显示区域:盒子尺寸与一张精灵小图尺寸相同
  2. 定义动画:移动背景图(移动距离 = 精灵图宽度)
  3. 使用动画:strps(N),N 与精灵小图个数相同

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 140px;height: 140px;border: 1px solid black;background-image: url(./img/01.png);animation: run 1s steps(12) infinite;}</style>
</head>
<body><div></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-14 144049

多组动画

语法格式:

animation: 动画1,动画2,......
;

代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 140px;height: 140px;/* border: 1px solid black; */background-image: url(./img/01.png);animation: run 1s steps(12) infinite,move 5s linear forwards;}@keyframes run {from {background-position: 0 0;}            to {background-position: -1680px 0;}}@keyframes move {0% {transform: translate(0);}100% {transform: translate(800px);}}</style>
</head>
<body><div></div>
</body>
</html>

结果如下:

屏幕录制 2025-03-14 144234

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

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

相关文章

Keepalived高可用架构实战:从安装配置到高级应用详解

一.架构 用户空间核心组件&#xff1a; vrrp stack&#xff1a;VIP 消息通信checkers&#xff1a;监测 Real Serversystem call&#xff1a;实现 vrrp 协议状态转换时调用相关本地功能SMTP&#xff1a;邮件组件IPVS wrapper&#xff1a;生成 IPVS 规则Netlink Reflector&…

Linux:利用System V系列的-共享内存,消息队列实现进程间通信

对于管道的进程间通信方式&#xff0c;需要频繁的调用系统调用(read,write)。而我们今天首先要介绍的共享内存&#xff0c;在开辟好空间之后&#xff0c;便可以跳过系统调用&#xff0c;直接进行读写操作。 一.System V共享内存(主要) 共享内存区是最快的IPC形式。一旦这样的内…

不像人做的题————十四届蓝桥杯省赛真题解析(上)A,B,C,D题解析

题目A&#xff1a;日期统计 思路分析&#xff1a; 本题的题目比较繁琐&#xff0c;我们采用暴力加DFS剪枝的方式去做&#xff0c;我们在DFS中按照8位日期的每一个位的要求进行初步剪枝找出所有的八位子串&#xff0c;但是还是会存在19月的情况&#xff0c;为此还需要在CHECK函数…

宇树人形机器人开源模型

1. 下载源码 https://github.com/unitreerobotics/unitree_ros.git2. 启动Gazebo roslaunch h1_description gazebo.launch3. 仿真效果 H1 GO2 B2 Laikago Z1 4. VMware: vmw_ioctl_command error Invalid argument 这个错误通常出现在虚拟机环境中运行需要OpenGL支持的应用…

【C/C++算法】从浅到深学习--- 前缀和算法(图文兼备 + 源码详解)

绪论&#xff1a;冲击蓝桥杯一起加油&#xff01;&#xff01; 每日激励&#xff1a;“不设限和自我肯定的心态&#xff1a;I can do all things。 — Stephen Curry” 绪论​&#xff1a; 本章将使用八道题由浅到深的带你了解并基本掌握前缀和思想&#xff0c;以及前缀和的基…

脑电:时域分析(任务态)

时域分析&#xff1a;时间序列&#xff08;时域信号&#xff09; EEG和ERP都是时间序列 ERP&#xff1a;事件诱发的电位是随着时间变化 组水平&#xff1a;需要这一组的个体不能差异性太大。 提值的指标&#xff0c;选取平均幅值确定成分的显著情况 mean(EEG.data,3): 在第…

【C语言】自定义类型:结构体,联合,枚举(下)

前言&#xff1b;上一期我们侧重讲了一个非常重要的自定义类型结构体&#xff0c;这一期我们来说说另外两种自定义类型&#xff1a;联合&#xff0c;和枚举。 传送门&#xff1a;自定义类型&#xff1a;结构体&#xff0c;联合&#xff0c;枚举(上) 文章目录 一&#xff0c;联…

数组的介绍

1.数组的概念 数组是一组相同类型元素的集合&#xff0c;从这个描述中我们知道&#xff1a; 数组中存放1个或多个数据&#xff0c;但是数组的元素个数不为0。数组中存放的多个数据&#xff0c;类型是相同的。 数组分为一维数组和多维数组&#xff0c;多维数组一般比较多见的…

蓝桥杯 17110抓娃娃

问题描述 小明拿了 n 条线段练习抓娃娃。他将所有线段铺在数轴上&#xff0c;第 i 条线段的左端点在 li&#xff0c;右端点在 ri​。小明用 m 个区间去框这些线段&#xff0c;第 i个区间的范围是 [Li​, Ri​]。如果一个线段有 至少一半 的长度被包含在某个区间内&#xff0c;…

linux ptrace 图文详解(二) PTRACE_TRACEME 跟踪程序

目录 一、基础介绍 二、PTRACE_TRACE 实现原理 三、代码实现 四、总结 &#xff08;代码&#xff1a;linux 6.3.1&#xff0c;架构&#xff1a;arm64&#xff09; One look is worth a thousand words. —— Tess Flanders 一、基础介绍 GDB&#xff08;GNU Debugger&…

记录致远OA服务器硬盘升级过程

前言 日常使用中OA系统突然卡死&#xff0c;刷新访问进不去系统&#xff0c;ping服务器地址正常&#xff0c;立马登录服务器检查&#xff0c;一看磁盘爆了。 我大脑直接萎缩了&#xff0c;谁家OA系统配400G的空间啊&#xff0c;过我手的服务器没有50也是30台&#xff0c;还是…

电网电压暂态扰动机理与工业设备抗失压防护策略研究

什么是晃电&#xff1f; 国标GB/T 30137-2013 中定义:工频电压方均根值突然降至额定值的90%~10%&#xff0c;持续时间为10ms~1min后恢复正常的现象。Acrel8757V 晃电的原因 1.系统侧因素 短路故障&#xff1a;雷击、线路接地、设备误碰等导致电网短路&#xff0c;故障点电压…

Linux监控网络状态

一、基本介绍 1、基本语法 netstat [选项] 2、常用选项 选项 说明 -a 显示所有连接和监听的套接字&#xff08;包括TCP、UDP&#xff09;。 -t 显示 TCP 连接。 -u 显示 UDP 连接。 -l 显示正在监听的套接字&#xff08;server端&#xff09;。 -n 显示数字格式的…

UE5以插件的形式加载第三方库

之前在UE中加载第三方库的形式是以静态或者动态链接的形式加载但是不太容易复用。就想着能不能以插件的形式加载第三方库&#xff0c;这样直接把插件打包发行就可以复用了&#xff0c;之前也找过相应的教程但是很难找到比较简单易懂的教程&#xff0c;要么是比较复杂&#xff0…

Go执行当前package下的所有方法

需求&#xff1a;需要一个文件一个定时任务方法&#xff0c;当项目初始化完毕后&#xff0c;自动加载并执行这些定时任务方法 项目目录架构 main.go 初始化 package mainimport ("sql_demo/schedule" )func main() {/***** 其他初始化完毕后的操作**/// 定时任务sc…

AnyAnomaly: 基于大型视觉语言模型的零样本可定制视频异常检测

文章目录 速览摘要1. 引言2. 相关工作视频异常检测大型视觉语言模型&#xff08;LVLMs&#xff09; 3. 方法3.1. 总览3.2. 关键帧选择模块3.3. 上下文生成基于 WinCLIP 的注意力机制网格图像生成 3.4. 异常检测提示词设计异常评分 4. 实验4.1. 数据集4.2. 评估标准4.3. 结果4.4…

【AWS入门】2025 AWS亚马逊云科技账户注册指南

【AWS入门】2025 AWS亚马逊云科技账户注册指南 A Guide To Register a New account on AWS By JacksonML 0. AWS亚马逊云科技简介 Amazon Web Service(AWS) 即亚马逊云科技&#xff0c;其在全球Cloud Computing(云计算)市场占有最为重要的地位。 AWS连续13年被Gartner评为…

Spring 中 SmartInitializingSingleton 的作用和示例

一、 接口定义 SmartInitializingSingleton 是 Spring 框架提供的一个 单例 Bean 全局初始化回调接口&#xff0c;用于在 所有非延迟单例 Bean 初始化完成后 执行自定义逻辑。 核心方法&#xff1a; public interface SmartInitializingSingleton {void afterSingletonsInsta…

element tree树形结构默认展开全部

背景&#xff1a; el-tree树形结构&#xff0c;默认展开全部&#xff0c;使用属性default-expand-all【是否默认展开所有节点】&#xff1b;默认展开一级&#xff0c;设置default-expanded-keys【默认展开的节点的 key 的数组】属性值为数组。 因为我这里的数据第一级是四川【省…

大数据-spark3.5安装部署之local模式

spark&#xff0c;一个数据处理框架和计算引擎。 下载 local模式即本地模式&#xff0c;就是不需要任何其他节点资源就可以在本地执行spark代码的环境。用于练习演示。 上传解压 使用PortX将文件上传至/opt 进入/opt目录&#xff0c;创建目录module&#xff0c;解压文件至/o…