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

【Web前端开发基础】CSS3之空间转换和动画

news 2025/12/24 1:42:08

CSS3之空间转换和动画

目录

  • CSS3之空间转换和动画
    • 一、空间转换
      • 1.1 概述
      • 1.2 3D转换常用的属性
      • 1.3 3D转换：translate3d（位移）
      • 1.4 3D转换：perspective（视角）
      • 1.5 3D转换：rotate3d（旋转）
      • 1.6 3D转换：transform-style: preserve-3d（立体呈现）
      • 1.7 3D转换：scale3d（缩放）
      • 1.7 3D导航案例
    • 二、动画
      • 2.1 动画介绍
      • 2.2 动画的基本使用
      • 2.3 动画的常用属性
      • 2.4 逐帧动画

一、空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

1.1 概述

  • 空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同

  • 空间转换也叫3D转换

  • 属性：transform
    在这里插入图片描述

  • 2D转换能够改变元素X轴和Y轴方向特性，3D转换还能改变Z轴方向特性，并且可以通过视角设置透视关系，使元素具有透视效果

1.2 3D转换常用的属性

在这里插入图片描述

1.3 3D转换：translate3d（位移）

目标：使用translate实现元素空间位移效果

  • 语法
    • transform: translate3d(x, y, z);
    • transform: translateX(x);
    • transform: translateY(y);
    • transform: translateZ(z);
  • 取值（正负即可）：① 数字+px ② 百分比
  • 注意点：x，y，z是不能够省略的，如果没有就写0

1.4 3D转换：perspective（视角）

目标：使用perspective属性实现透视效果

  • 思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
    • 答：近大远小、近清楚远模糊
  • 思考：默认情况下，为什么无法观察到Z轴位移效果？
    • 答：Z轴是视线方向，移动效果是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果
  • 属性（添加给父级）
    • perspective: 值;
    • 取值：像素单位数值， 数值一般在800 – 1200
  • 作用
    • 空间转换时，为元素添加近大远小、近实远虚的视觉效果
      在这里插入图片描述

1.5 3D转换：rotate3d（旋转）

目标：使用rotate实现元素空间旋转效果

  • 语法
    • transform: rotate3d(x, y, z, angle);
    • transform: rotateX(x);
    • transform: rotateY(y);
    • transform: rotateZ(z);
  • 注意点：
    • rotate3d(x, y, z, angle) ：用来设置自定义旋转轴的位置及旋转的角度
    • x，y，z 取值为0-1之间的数字
  • 左手法则：判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
    在这里插入图片描述

1.6 3D转换：transform-style: preserve-3d（立体呈现）

目标： 使用transform-style: preserve-3d呈现立体图形

  • 思考：使用perspective透视属性能否呈现立体图形？

    • 答：不能，perspective只增加近大远小、近实远虚的视觉效果

  • 实现方法

    • 添加transform-style: preserve-3d;
    • 使子元素处于真正的3d空间
      在这里插入图片描述

  • transform-style取值

    • preserve-3d ：设置3D转换
    • flat ：默认值

  • 呈现立体图形步骤

    1. 盒子父元素添加transform-style: preserve-3d;
    2. 按需求设置子盒子的位置（位移或旋转）

  • 注意：空间内，转换元素都有自已独立的坐标轴，互不干扰
    在这里插入图片描述

1.7 3D转换：scale3d（缩放）

目标：使用scale实现空间缩放效果

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

1.7 3D导航案例

目标：使用立体呈现技巧实现3D导航效果

  • 实现思路：

    1. 搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面
      在这里插入图片描述

      • li标签
        • 添加立体呈现属性transform-style: preserve-3d;
        • 添加旋转属性（为了便于观察效果，案例完成后删除即可）
          在这里插入图片描述
      • a标签
        • 调节a标签的位置
          • a标签定位（子绝父相）
          • 英文部分添加旋转和位移样式
          • 中文部分添加位移样式
            在这里插入图片描述

    2. 添加hover状态旋转切换效果

      • 鼠标滑过li， 添加空间旋转样式
      • li添加过渡属性

    3. 注意： 案例完成后，删除li的旋转样式

二、动画

目标：使用animation添加动画效果

2.1 动画介绍

  • 动画是CSS3中具有颠覆性的特征之一，有通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
    相较于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

  • 动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
    在这里插入图片描述

  • 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

  • 构成动画的最小单元：帧或动画帧
    在这里插入图片描述

2.2 动画的基本使用

  • 制作动画分为两步：

    1. 先定义动画
      在这里插入图片描述

    2. 再使用（调用）动画
      在这里插入图片描述

  • 动画的序列

    • 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
    • 在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
    • 动画是元素从一种样式逐渐变化为另外一种样式的效果。你可以改变任意多的样式任意多的次数
    • 请使用百分比来规定变化发生的时间，或者关键词 from 和 to ，等同于 0% 和 100%
  1. 使用 @keyframes 定义动画（类似定义类选择器）
/* 定义动画 *//* ① 百分比 */
@keyframes 动画名 {0% {初始状态样式}100% {动画结束时样式}
}/* 关键字 */
@keyframes 动画名 {from {初始状态样式}to {动画结束时样式}
}
  1. 元素使用动画
/* 使用(调用动画) */使用动画的元素 {/* 调用动画 */animation-name: 动画名称;/* 持续时间 */animation-duration: 持续时间;
}
  1. 快速体验
    定义并使用动画
/* 需求：我们打开页面，盒子就从左边走到右边 */
/* 第1种：百分比 */
/* 1.定义动画 */
@keyframes move {0% {transform: translate(0, 0);}100% {transform: translate(1000px, 0);}
}
/* 第2种：关键字 */
/* 1.定义动画 */
/* from 和 to 等价于 0% 和 100% */
@keyframes move {from {transform: translate(0, 0);}to {transform: translate(1000px, 0);}
}
div {width: 200px;height: 200px;background-color: pink;/* 2.调用动画 *//* 动画名称 */animation-name: move;/* 动画持续时间 */animation-duration: 2s;
}

动画序列里的百分比

<!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, initialscale=1.0"><title>Document</title><style>/* 动画序列 *//* 1. 可以做多个状态的变化 keyframes 关键帧*//* 2. 里面的百分比要是整数 *//* 3. 里面的百分比就是 总的时间的划分 eg: 6s * 25% = 1.25s*/@keyframes move {/* 起始状态，可以为空或者不写 */0% {transform: translate(0, 0);}25% {transform: translate(1000px, 0);}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500px);}100% {transform: translate(0, 0);}}div {width: 200px;height: 200px;background-color: pink;/* 调用动画，直接使用名字调用 */animation-name: move;/* 设置动画持续时间 */animation-duration: 6s;}</style>
</head>
<body><div></div>
</body>
</html>
  1. 动画的连写
    在这里插入图片描述
    • 动画名称和动画时长必须赋值
    • 取值不分先后顺序
    • 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

2.3 动画的常用属性

在这里插入图片描述

<!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>Document</title><style>@keyframes move {0% {transform: translate(0, 0);}100% {transform: translate(1000px, 0);}}div {width: 100px;height: 100px;background-color: pink;/* 动画名称（必备属性） */animation-name: move;/* 持续时间（必备属性）*/animation-duration: 2s;/* 动画运动速度曲线 */animation-timing-function: ease;/* 动画何时开始 */animation-delay: 1s;/* 重复次数 iteration 重复的 count 次数 infinite 无限 */animation-iteration-count: infinite;/* 是否反方向播放 默认是normal 若需要逆向播放，则使用alternate*/animation-direction: alternate;/* 动画结束状态 默认是backwards 回到起始状态，我们也可以让他停留在结束状态
forwards */animation-fill-mode: forwards;}div:hover {/* 动画播放状态 *//* 鼠标经过 div, 让这个 div 的动画停止，鼠标离开 div 就继续播放动画 */animation-play-state: paused;}</style>
</head>
<body><div></div>
</body>
</html>

2.4 逐帧动画

目标：使用steps实现逐帧动画

  • 属性： animation-timing-function

  • 取值： steps(数字)：逐帧动画
    在这里插入图片描述

  • 逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果

  • animation-timing-function: steps(N); 将动画过程等分成N份
    在这里插入图片描述

  • 精灵动画制作步骤

    • 准备显示区域
      • 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
    • 定义动画
      • 改变背景图的位置（移动的距离就是精灵图的宽度）
    • 使用动画
      • 添加速度曲线steps(N)，N与精灵图上小图个数相同
      • 添加无限重复效果
        在这里插入图片描述

  • 多组动画

    • 思考：如果想让小人跑远一些，该如何实现？
    • 答：精灵动画的同时添加盒子位移动画
      在这里插入图片描述
/* 样式代码 */
.box {width: 140px;height: 140px;background: url("./images/jlbg.png") no-repeat 0 0;animation: run 1s steps(12) 3, move 3s linear forwards;
}
@keyframes run {/* 动画的开始状态和原来的默认样式相同时，可以省略开始状态的代码 */0% {background-position: 0 0;}100% {background-position: -1680px 0;}
}
@keyframes move {0% {transform: translate(0);}100% {transform: translate(1000px);}
}

<!-- 结构代码 -->
<div class="box"></div>

相关文章：

【Web前端开发基础】CSS3之空间转换和动画

CSS3之空间转换和动画 目录 CSS3之空间转换和动画一、空间转换1.1 概述1.2 3D转换常用的属性1.3 3D转换&#xff1a;translate3d&#xff08;位移&#xff09;1.4 3D转换&#xff1a;perspective&#xff08;视角&#xff09;1.5 3D转换&#xff1a;rotate3d&#xff08;旋转&a…...

编程日记 2024/1/26 0:47:15

Go实现一个简单的烟花秀效果（附带源码）

在 Go 语言中&#xff0c;要实现烟花秀效果可以使用 github.com/fogleman/gg 包进行绘图。以下是一个简单的例子&#xff1a; 首先&#xff0c;确保你已经安装了&#xff08;有时候需要梯子才可以安装&#xff09; github.com/fogleman/gg 包&#xff1a; go get -u github.c…...

编程日记 2024/1/26 0:46:14

【数学建模】插值与拟合

文章目录 插值插值方法用Python解决插值问题 拟合最小二乘拟合数据拟合的Python实现 适用情况 处理由试验、测量得到的大量数据或一些过于复杂而不便于计算的函数表达式时&#xff0c;构造一个简单函数作为要考察数据或复杂函数的近似 定义 给定一组数据&#xff0c;需要确定满…...

编程日记 2024/1/26 0:45:13

全卷积网络：革新图像分析

一、介绍 全卷积网络&#xff08;FCN&#xff09;的出现标志着计算机视觉领域的一个重要里程碑&#xff0c;特别是在涉及图像分析的任务中。本文深入探讨了 FCN 的概念、它们的架构、它们与传统卷积神经网络 &#xff08;CNN&#xff09; 的区别以及它们在各个领域的应用。 就像…...

编程日记 2024/1/26 0:42:11

ubuntu20.04 格式化 硬盘 扩展硬盘GParted

如何在 Ubuntu 22.04 LTS 上安装分区编辑器 GParted&#xff1f;_gparted安装-CSDN博客 sudo apt install gparted 步骤5&#xff1a;启动GParted 安装完成后&#xff0c;您可以在应用程序菜单中找到GParted。点击它以启动分区编辑器。 通过以上步骤&#xff0c;您可以在Ubun…...

编程日记 2024/1/26 0:39:08

docker的资源限制（cgroup）

前瞻 Docker 通过 Cgroup 来控制容器使用的资源配额&#xff0c;包括 CPU、内存、磁盘三大方面&#xff0c; 基本覆盖了常见的资源配额和使用量控制。 Cgroup 是 ControlGroups 的缩写&#xff0c;是 Linux 内核提供的一种可以限制、记录、隔离进程组所使用的物理资源(如 CPU、…...

编程日记 2024/1/26 0:37:06

ChatGPT与文心一言：应用示例与体验比较

ChatGPT 和文心一言哪个更好用&#xff1f; 为了更好地感受ChatGPT和文心一言这两款AI助手如何在实际运用中竞相辉映&#xff0c;我将提供一些典型的应用示例。这些示例都取自真实的用户体验&#xff0c;以帮助解释这两种工具如何让日常生活或工作变得更加轻松。 ChatGPT Ch…...

编程日记 2024/1/26 0:35:04

紫光展锐T760_芯片性能介绍_展锐T760安卓核心板定制

展锐T760核心板是一款基于国产5G芯片的智能模块&#xff0c;采用紫光展锐T760制程工艺为台积电6nm工艺&#xff0c;支持工艺具有出色的能效表现。其采用主流的44架构的八核设计&#xff0c;包括4颗2.2GHz A76核心和4颗A55核心设计&#xff0c;内存单元板载可达8GB Ram256GB ROM…...

编程日记 2024/1/26 0:30:59

从动力系统研究看当今数学界

6.3... Milnor’s definition of “attractors” which has been criticized above by us). The work of [KSS2] of asserting the existence of “nice open set” of Ω(p.148) would be likely not verified, for example we think the first sentence “… since f is nont…...

编程日记 2024/1/26 0:28:58

【征服redis15】分布式锁的功能与整体设计方案

目录 1. 分布式锁的概念 2.基于数据库做分布式锁 2.1 基于表主键唯一做分布式锁 2.2 基于表字段版本号做分布式锁 2.3 基于数据库排他锁做分布式锁 3.使用Redis做分布式锁 3.1 redis实现分布式锁的基本原理 3.2 问题一&#xff1a;增加超时机制&#xff0c;防止长期持有…...

编程日记 2024/1/26 0:21:52

MATLAB中实现机械臂逆运动学求解的方法之一是使用阻尼最小二乘法

MATLAB中实现机械臂逆运动学求解的方法之一是使用阻尼最小二乘法。阻尼最小二乘法通常用于处理数值求解问题中的不稳定性和噪声。以下是一个简单的MATLAB代码示例&#xff0c;演示了机械臂逆运动学的阻尼最小二乘法求解&#xff1a; % 机械臂参数 L1 1; % 机械臂长度 L2 1;…...

编程日记 2024/1/26 0:20:52

2024.1.24 GNSS 学习笔记

1.伪距观测值公式 2.载波相位观测值公式 3.单点定位技术(Single Point Positionin, SPP) 仅使用伪距观测值&#xff0c;不使用其他的辅助信息获得ECEF框架下绝对定位技术。 使用广播星历的轨钟进行定位&#xff0c;考虑到轨钟的米级精度&#xff0c;所以对于<1米的误差&…...

编程日记 2024/1/26 0:19:51

2024-01-22（MongoDB）

1.Mongodb使用的业务场景&#xff1a; 传统的关系型数据库/mysql在“三高”需求以及应对web2.0的网站需求面前&#xff0c;有点力不从心&#xff0c;什么是“三高”需求&#xff1a; a. 对数据库高并发的读写需求 b. 对海量数据的高效率存储和访问需求 c. 对数据库的高可扩…...

编程日记 2024/1/26 0:13:45

无人机航迹规划（六）：七种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划（提供MATLAB代码）

一、七种算法&#xff08;DBO、LO、SWO、COA、LSO、KOA、GRO&#xff09;简介 1、蜣螂优化算法DBO 蜣螂优化算法&#xff08;Dung beetle optimizer&#xff0c;DBO&#xff09;由Jiankai Xue和Bo Shen于2022年提出&#xff0c;该算法主要受蜣螂的滚球、跳舞、觅食、偷窃和繁…...

编程日记 2024/1/26 0:10:42

《WebKit 技术内幕》学习之十二（2）：安全机制

2　沙箱模型 2.1　原理 一般而言&#xff0c;对于网络上的网页中的JavaScript代码和插件是不受信的&#xff08;除非是经过认证的网站&#xff09;&#xff0c;特别是一些故意设计侵入浏览器运行的主机代码更是非常危险&#xff0c;通过一些手段或者浏览器中的漏洞&#xff0c…...

编程日记 2024/1/26 0:08:41

算法优化：LeetCode第122场双周赛解题策略与技巧

接下来会以刷常规题为主 &#xff0c;周赛的难题想要独立做出来还是有一定难度的&#xff0c;需要消耗大量时间 比赛地址 3011. 判断一个数组是否可以变为有序 public class Solution {public int minimumCost(int[] nums) {if (nums.length < 3) {// 数组长度小于3时&a…...

编程日记 2024/1/26 0:07:39

IDEA导出jar

1、选择导出方式 2、选择Main Class 3、构建jar...

编程日记 2024/1/26 0:05:37

Win10/11中VMware Workstation设置网络桥接模式

文章目录 一、添加VMware Bridge Protocol服务二、配置桥接参数1.启用系统Device Install Service服务2.配置VMware 需要确认物理网卡是否有添加VMware Bridge Protocol服务 添加VMware Bridge Protocol服务 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参…...

编程日记 2024/1/26 0:01:33

html Canvas粒子文字特效

代码有点长&#xff0c;下面是代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>HTML5 Canvas粒子效果文字动画特效DEMO演示</title><link rel"stylesheet" href"css/normalize.c…...

编程日记 2024/1/25 23:59:29

@JsonFormat失效，被jackson自定义配置覆盖

jackson配置类 我的jackson配置类如下&#xff0c;其中serializerByType(LocalDateTime.class, new LocalDateTimeSerializer()) 覆盖了JsonFormat注解 Configuration public class JacksonConfiguration {public static final DateTimeFormatter optionalDateTimePattern (n…...

编程日记 2024/1/25 23:58:28

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/12/23 13:54:23

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/12/19 7:16:50

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/12/16 23:25:05

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2025/12/10 16:16:55

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2025/12/15 13:11:03

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2025/12/23 13:48:28