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

移动 Web核心笔记(二)

空间转换

空间:是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴位置与视线方向相同。 空间转换也叫 3D转换
属性:transform
b4f56de182f5451a9265bdd0159edec7.png

平移

/*单独设置 z轴效果不明显*/
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值(正负均可)
  •  像素单位数值
  •  百分比(参照盒子自身尺寸计算结果)
提示
默认情况下,Z 轴平移没有效果

视距 perspective

作用:指定了观察者与 Z=0 平面的距离,为元素添加透视效果
透视效果:近大远小、近实远虚
属性:( 添加给父级,取值范围 800-1200)
4d16dcd9f77244ee940f48eaadae1396.png

旋转

配合 视距perspective(800~1200) 效果更佳哦

/*绕着z轴而转 方向:顺时针*/
transform: rotateZ(值deg);
/*绕着x轴而转 方向:向里面*/
transform: rotateX(值deg);
/*绕着y轴而转 方向:向里面*/
transform: rotateY(值deg);
左手法则 – 根据旋转方向确定取值正负
左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向

21b33a20ffe3420caeb37b34f14ba404.png

立体呈现 – transform-style

作用:设置元素的子元素是位于 3D 空间中还是平面中
属性名:transform-style
属性值:
flat:子级处于平面中
preserve-3d:子级处于 3D 空间
 /*给父级元素*/
transform-style: preserve-3d;
呈现立体图形步骤
1. 父元素添加transform-style: preserve-3d;
2. 子级定位
3. 调整子盒子的位置(位移或旋转)
提示 : 空间内,转换元素都有自已独立的坐标轴,互不干扰
旋转改变了原有的坐标轴向

缩放

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

动画 (animation)

过渡:实现两个状态间的变化过程
动画:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)
/*定义动画:第一种*/
@keyframes 动画名称 {from{}to{}
}
/*定义动画:第二种*/
@keyframes 动画名称 {
/*百分比表示 动画时长的百分比*/0% {}10%{}......100%{}
}

使用动画:

animation:动画名称 动画时长(s) 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
速度曲线:linear 匀速运动
分布动画:steps() 配合精灵图使用
提示:
动画名称和动画时长必须赋值 
取值不分先后顺序
如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间

6d20a586d4dc496f8aa6ffb60cedf75f.png

 /* 动画时长 */
animation-duration: 1s;/* 播放次数 */
animation-iteration-count: infinite;
.box:hover {/* 暂停动画 */animation-play-state: paused;}

多组动画

animation:动画1,动画2,动画n
;
animation:
run 1s steps(12) infinite,
move 3s linear forwards
;
img {/*图片为行内元素,不能设置宽高,要变为块元素,切记  */display: block;width: 200px;}

相关文章:

移动 Web核心笔记(二)

空间转换 空间:是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴位置与视线方向相同。 空间转换也叫 3D转换 属性:transform 平移 /*单独设置 z轴效果不明显*/ transform: translate3d(x, y, z); transform: translateX(…...

MySQL创建和管理表

1. 基础知识 存储数据是处理数据的第一步,只有正确地把数据存储起来,才能进行有效的处理和分析。 在 MySQL 中,一个完整的数据存储过程总共有 4 步,分别是创建数据库、确认字段、创建数据表、插入数据。 从系统架构的层次上看…...

【从零开始的LeetCode-算法】910. 最小差值 II

给你一个整数数组 nums&#xff0c;和一个整数 k 。 对于每个下标 i&#xff08;0 < i < nums.length&#xff09;&#xff0c;将 nums[i] 变成 nums[i] k 或 nums[i] - k 。 nums 的 分数 是 nums 中最大元素和最小元素的差值。 在更改每个下标对应的值之后&#xf…...

周报 | 24.10.14-24.10.20文章汇总

为了更好地整理文章和发表接下来的文章&#xff0c;以后每周都汇总一份周报。 周报 | 24.10.7-24.10.13文章汇总-CSDN博客 OpenCV与AI深度学习 | T-Rex Label &#xff01;超震撼 AI 自动标注工具&#xff0c;开箱即用、检测一切-CSDN博客 计算机视觉与机器学习 | 目标检测 …...

Codeforce 980 Div2 A-D 题解

A. Profitable Interest Rate 原题 A. Profitable Interest Rate 思路 易推出公式 2 * a - b 代码 #include <bits/stdc.h> //#define int long long#define F(i, a, b) for (int i (a); i < (b); i) #define dF(i, a, b) for (int i (a); i > (b); i--)usi…...

一次代码优化的过程

场景说明&#xff1a; wpf项目&#xff0c;有4个不同的页面&#xff0c;共用一个next按钮&#xff0c;实现点击后跳转到下一个页面。 第一个页面是导入文件&#xff0c;当有2个及以上文件时&#xff0c;会弹窗提示。如下图所示&#xff1a; 之前和之后的代码对比&#xff1a; 之…...

多线程的学习(1)

线程的创建方式 1.继承Thread类 package duoXianCheng;public class MyThread extends Thread{public void run(){System.out.println("hoh");}public static void main(String[] args) {MyThread m1 new MyThread();m1.start();//start启动线程&#xff0c;调用重…...

PyCharm借助MobaXterm跳板机连接服务器

服务器信息&#xff1a; Step 1 MovaXterm→Session→SSH输入服务器信息 Step 2 MovaXterm→Session→SSH→Network setting→SSG gateway(jump host) 输入跳板机信息 键入密码即可 Step 3 MovaXterm→Tunneling→New SSH tunnel 依次输入&#xff1a;A本机端口&#xff0c…...

计算机毕业论文基于Android 的签到系统设计与实现

计算机专业本科毕业设计(论文)开题报告 毕业设计(论文)题目:基于Android的签到系统设计与实现 文章目录 毕业设计论文开题报告一、课题的目的及意义(含国内外的研究现状分析):二、课题任务、重点研究内容、实现途径、条件:摘 要1. 绪论1.1. 研究背景1.2. 研究现状1.3.…...

量化学习-02

1、宏观经济学基础概念 宏观经济简单背景 宏观经济&#xff0c;就是在宏观范畴以全局视角观察经济现象&#xff0c;分析其中的经济总量。该宏观范畴所包含的范围可以指一个国家或地区&#xff0c;是由众多微观个体组成的一个经济体&#xff0c;而这里面的微观个体可以指一个家…...

SAP_MM模块-设置业务合作伙伴类型字段必输(多种方案)

一、业务背景 公司需要把供应商增加一个细分的维度&#xff0c;并且要求该字段设置为必输&#xff0c;防止用户新增供应商时忘记维护。这里给用户找了一个分类的字段&#xff1a;业务合作伙伴类型&#xff0c;本文主要讲解如何设置该字段设置为必填&#xff1b; 注意&#xff…...

STM32平台上实现串口接收不定长数据-实际项目中应用

文章目录 一、中断串口监听方式初始化中断处理串口监听 二、空闲中断方式三、空闲中断DMA方式四、总结 本文将详细介绍在STM32平台上实现串口接收不定长数据的几种方法 一、中断串口监听方式 这种方式也是我早期使用的方式&#xff0c;直接使用寄存器来操作&#xff0c;这种方…...

AWD入门

一、简介 AWD(Attack With Defense&#xff0c;攻防兼备)模式。你需要在一场比赛里要扮演攻击方和防守方&#xff0c;攻者得分&#xff0c;失守者会被扣分。也就是说攻击别人的靶机可以获取 Flag 分数时&#xff0c;别人会被扣分&#xff0c;同时你也要保护自己的主机不被别人…...

T3矩阵看功率

每个像素的T3矩阵&#xff0c;功率等于特征值的和。 不同的像素的T3矩阵相加&#xff0c;可不能用特征分解的相加&#xff0c;因为两个T矩阵的特征向量不同...

VLMEvalKit多模态大模型评测工具源码解析

vlmeval/api和vlmeval/vlm文件夹下分别是api接口和本地运行的大模型的代码 基类都是base vlmeval/dataset是数据集处理代码 vlmeval/inference.py是推理代码 run.py的整个流程 1 vlmeval/api/base.py 主要为需要与外部API交互的系统提供了一个通用的框架 类属性 allowed_type…...

将 Docker 安装到指定目录

将 Docker 安装到指定目录 将 Docker 安装到指定目录 Docker 默认安装在 C:\Program Files\Docker\Docker&#xff0c;这可能会占用大量 C 盘空间。你可以按以下步骤将 Docker 安装到其他盘&#xff08;例如 E 盘&#xff09;&#xff1a; 创建安装目录&#xff1a;在 E 盘创…...

哪些企业需要部署SD-WAN?

首先&#xff0c;让我们先明确SD-WAN的定义。SD-WAN&#xff0c;中文全称为软件定义广域网&#xff08;Software-Defined Wide Area Network&#xff09;&#xff0c;通过集中化管理与流量控制&#xff0c;帮助企业优化网络性能&#xff0c;提升用户体验。与传统广域网&#xf…...

通信基站类型、频段与网络标准

【1】通信基站类型 移动通信基站根据覆盖面积和功率大小主要可以分为以下几种类型&#xff1a; 宏基站&#xff08;宏站&#xff09;&#xff1a;这是最常见的基站类型&#xff0c;具有较大的发射功率和较广的覆盖范围&#xff0c;通常覆盖半径从1到25公里不等。宏基站主要用于…...

Java IO教程之Java 文件一口气讲完!( *︾▽︾)

Java 文件 Java IO教程 - Java文件 File类的对象是文件或目录的路径名的抽象表示。 创建文件 我们可以从中创建一个 File 对象 路径名父路径名和子路径名URI&#xff08;统一资源标识符&#xff09; 我们可以使用File类的以下构造函数之一创建一个文件&#xff1a; File(…...

如何在 Ubuntu 24 上安装 Vmware Tools

原文 Vmware Tools作用 增强图形显示性能 分辨率适配 可使虚拟机的分辨率能够自动适应窗口大小的变化。当您调整 VMware 软件窗口的大小时&#xff0c;Ubuntu 24 虚拟机的屏幕分辨率会随之自动调整&#xff0c;为用户提供更好的视觉体验&#xff0c;方便在不同的使用场景下进…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...