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

2D与动画

news 2025/10/27 17:38:43

2D转换

1.移动 translate

1. 语法

transform: translate(x,y); 或者分开写

transform: translateX(n);

transform: translateY(n);

2.重点

定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素

translate最大的优点：不会影响到其他元素的位置

translate中的百分比单位是相对于自身元素的 translate:(50%,50%);

对行内标签没有效果

例子：使一个盒子水平垂直居中

<!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 {position: relative;width: 500px;height: 500px;background-color: blue;}p {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
background-color: pink;
transform: translate(-50%,-50%);}</style>
</head>
<body><div><P></P></div>
</body>
</html>

2.旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

1. 语法

transform:rotate( 度数 )

2. 重点



rotate里面跟度数，单位是 deg 比如 rotate(45deg)



角度为正时，顺时针，负时，为逆时针



默认旋转的中心点是元素的中心点

例子：三角

<!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 {position: relative;width: 249px;height: 35px;border: 1px solid #000;}div::after{content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right:1px solid #000 ;
border-bottom:1px solid #000 ;
transform: rotate(45deg);
transform: all 0.2s;}div:hover::after {transform: rotate(225deg);}</style>
</head>
<body><div></div>
</body>
</html>

鼠标一放由此

变成

3.转换中心点 transform-origin

我们可以设置元素转换的中心点

1. 语法

transform-origin: x y;

2. 重点



注意后面的参数 x 和 y 用空格隔开



x y 默认转换的中心点是元素的中心点 (50% 50%)



还可以给x y 设置像素或者方位名词（top bottom left right 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>div {overflow: hidden;width: 200px;height: 200px;border: 1px solid pink;margin: 10px;float: left;}div::before {content: "回村的诱惑";display: block;width: 200px;height: 200px;background-color: hotpink;transform: rotate(180deg);transform-origin: left bottom;transition: all 0.2s;}div:hover::before {transform: rotate(0deg);}</style>
</head>
<body><div></div><div></div><div></div><div></div>
</body>
</html>

屏幕录制 2024-03-29 103150

4.转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

1. 语法

transform: scale( x,y);

2. 注意



注意其中的x和y用逗号分隔



transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大



transform:scale(2,2) ：宽和高都放大了2倍



transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)



transform:scale(0.5,0.5)：缩小



sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

分页案例：

<!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>ul li {float: left;width: 30px;height: 30px;line-height: 30px;text-align: center;border: 1px solid red;border-radius: 50%;list-style: none;margin: 10px;cursor: pointer;transition: all 0.1s;}li:hover {transform: scale(1.3);}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
</body></html>

5.2D 转换综合写法

注意：

1. 同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，

2. 其顺序会影转换的效果。（先旋转会改变坐标轴方向）

3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前

动画

1.先定义动画

2.再使用（调用）动画

1. 用keyframes 定义动画（类似定义类选择器）

@keyframes 动画名称 {0%{width:100px;} 100%{width:200px;}
}

2. 元素使用动画

div {width: 200px;height: 200px;background-color: aqua;margin: 100px auto;/* 调用动画 */animation-name: 动画名称;/* 持续时间 */animation-duration: 持续时间;}

3.常用属性

4.简写属性

animation: myfirst 5s linear 2s infinite alternate;

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;



简写属性里面不包含 animation-play-state



暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用



想要动画走回来，而不是直接跳回来：animation-direction ： alternate



盒子动画结束后，停在结束位置： animation-fill-mode ： forwards

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

step案例：

<!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 {overflow: hidden;font-size: 20px;width: 0;height: 30px;white-space: nowrap;background-color: skyblue;animation: o 4s steps(8) forwards;}
@keyframes o {0%{width: 0;}100% {width: 160px;}
}</style>
</head>
<body><div>前途似海来日方长</div>
</body>
</html>

2D与动画

2D转换 1.移动 translate 1. 语法 transform: translate(x,y); 或者分开写 transform: translateX(n); transform: translateY(n); 2.重点定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素 translate最大的优点：不会影响到其他元素的位置 translat…...

编程日记 2024/3/30 11:12:37

Maven：构建现代化软件项目的强大工具

在软件开发的世界中，Maven 是一个备受欢迎的构建工具。它提供了一种标准化、自动化的方式来管理项目的依赖、构建过程和部署。本文将深入探讨 Maven 的各个方面，帮助您更好地理解和使用这一强大的工具。一、Maven 的简介 Maven 是一个基于项目…...

编程日记 2024/3/30 11:11:36

脏牛提权（靶机复现）

目录一、脏牛漏洞概述二、漏洞复现 1.nmap信息收集 1.1.查看当前IP地址 1.2.扫描当前网段，找出目标机器 1.3.快速扫描目标机全端口三、访问收集到的资产 192.168.40.134:80 192.168.40.134:1898 四、msf攻击 1.查找对应exp 2.选择对应exp并配置相关设置五、内…...

编程日记 2024/3/30 11:10:35

用html写一个贪吃蛇游戏

<!DOCTYPE html> <html> <head><title>贪吃蛇</title><meta charset"UTF-8"><meta name"keywords" content"贪吃蛇"><meta name"Description" content"这是一个初学者用来学习的小…...

编程日记 2024/3/30 11:08:33

Topaz Gigapixel AI for Mac 图像放大软件

Topaz Gigapixel AI for Mac是一款专为Mac用户设计的智能图像放大软件。它采用了人工智能技术，特别是深度学习算法，以提高图像的分辨率和质量，使得图像在放大后仍能保持清晰的细节。这款软件的特点在于其能够将低分辨率的图片放大至高分辨率&…...

编程日记 2024/3/30 11:07:32

uniapp先显示提示消息再返回上一页

一、描述在有些业务场景中，需要先弹出提示后，再返回上一页。二、思路使用定时器，先弹出提示消息，然后开个定时器俩秒后再执行，返回上一页的操作，并且清除定时器。三、实现 uni.showToast({title: …...

编程日记 2024/3/30 11:03:28

【爬虫开发】爬虫从0到1全知识md笔记第2篇：requests模块,知识点：【附代码文档】

爬虫开发从0到1全知识教程完整教程（附代码资料）主要内容讲述：爬虫课程概要，爬虫基础爬虫概述,,http协议复习。requests模块，requests模块1. requests模块介绍,2. response响应对象,3. requests模块发送请求,4. request…...

编程日记 2024/3/30 11:00:25

【算法刷题day11】Leetcode: 20. 有效的括号、 1047. 删除字符串中的所有相邻重复项、150. 逆波兰表达式求值

20. 有效的括号文档链接：[代码随想录] 题目链接：20. 有效的括号状态：ok 题目： 给定一个只包括 ‘(’，‘)’，‘{’，‘}’，‘[’，‘]’ 的字符串 s ，判断字符…...

编程日记 2024/3/30 10:59:24

hadoop 常用命令 hadoop fs -mkdir /test hadoop fs -put /opt/frank/tb_test03.txt /test/ hadoop fs -ls /test/ hadoop fs -cat /test/tb_test03.txt hadoop fs -rm /test/tb_test03.txt hadoop dfs 也能使用、但不推荐，执行会提示： DEPRECATED: Us…...

编程日记 2024/3/30 10:55:20

pdf在浏览器上无法正常加载的问题

一、背景觉得很有意思给大家分享一下。事情是这样的，开发给我反馈说，线上环境接口请求展示pdf异常，此时碰巧我前不久正好在ingress前加了一层nginx，恰逢此时内心五谷杂陈，思路第一时间便放在了改动项。捣鼓了好久无果…...

编程日记 2024/3/30 10:52:17

实时语音识别（Python+HTML实战）

项目下载地址：FunASR 1 安装库文件项目提示所需要下载的库文件：pip install -U funasr 和 pip install modelscope 运行过程中，我发现还需要下载以下库文件才能正常运行： 下载：pip install websockets，pi…...

编程日记 2024/3/30 10:50:15

x86_64 ubuntu22.04编译MetaRTC

metaRTC5.0 API https://github.com/metartc/metaRTC/wiki/metaRTC5.0-API Sample https://github.com/metartc/metaRTC/wiki/metaRTC5.0-API-Sample MetaRTC7.0编译 https://github.com/metartc/metaRTC/wiki/Here-we-come,-write-a-C-version-of-webRTC-that-runs-everywhere…...

编程日记 2024/3/30 10:49:14

2D转换

1.移动 translate

2.旋转 rotate

3.转换中心点 transform-origin

4.转换之缩放scale

5.2D 转换综合写法

动画

1. 用keyframes 定义动画（类似定义类选择器）

2. 元素使用动画

3.常用属性

4.简写属性

相关文章：