css3-----2D转换、动画
2D 转换(transform)
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
- 移动:translate
- 旋转:rotate
- 缩放:scale
二维坐标系

2D 转换之移动 translate

2D 转换之旋转 rotate

应用场景

p::before {
content: '';
position: absolute;
right: 20px;
top: 10px;
width: 10px;height: 10px;border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
}
2D 转换中心点 transform-origin

2D 转换之缩放scale

2D 转换综合写法

2D 转换总结
转换transform 我们简单理解就是变形 有2D 和 3D 之分
我们暂且学了三个 分别是 位移 旋转 和 缩放
2D 移动 translate(x, y) 最大的优势是不影响其他盒子, 里面参数用%,是相对于自身宽度和高度来计算的
可以分开写比如 translateX(x) 和 translateY(y)
2D 旋转 rotate(度数) 可以实现旋转元素 度数的单位是deg
2D 缩放 sacle(x,y) 里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子
设置转换中心点 transform-origin : x y; 参数可以百分比、像素或者是方位名词
当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前
动画(animation)
1.动画的基本使用
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: 持续时间;
}
2.动画常用属性

3.动画简写属性

4.速度曲线细节

相关文章:
css3-----2D转换、动画
2D 转换(transform) 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果 移动:translate旋转:rotate缩放:scale 二维坐标系 2D 转换之移动 trans…...
SQL进阶技巧:统计各时段观看直播的人数
目录 0 需求描述 1 数据准备 2 问题分析 3 小结 如果觉得本文对你有帮助,那么不妨也可以选择去看看我的博客专栏 ,部分内容如下: 数字化建设通关指南 专栏 原价99,现在活动价39.9,十一国庆后将上升至59.9&#…...
Stream流的终结方法
1.Stream流的终结方法 2.forEach 对于forEach方法,用来遍历stream流中的所有数据 package com.njau.d10_my_stream;import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util.function.Consumer; import java.util…...
JavaWeb——Vue组件库Element(4/6):案例:基本页面布局(基本框架、页面布局、CSS样式、完善布局、效果展示,含完整代码)
目录 步骤 基本页面布局 基本框架 页面布局 CSS样式 完善布局 效果展示 完整代码 Element 的基本使用方式以及常见的组件已经了解完了,接下来要完成一个案例,通过这个案例让大家知道如何基于 Element 中的各个组件制作一个完整的页面。 案例&am…...
【c++】 模板初阶
泛型编程 写一个交换函数,在学习模板之前,为了匹配不同的参数类型,我们可以利用函数重载来实现。 void Swap(int& a, int& b) {int c a;a b;b c; } void Swap(char& a, char& b) {char c a;a b;b c; } void Swap(dou…...
R 语言 data.table 大规模数据处理利器
前言 最近从一个 python 下的 anndata 中提取一个特殊处理过的单细胞矩阵,想读入R用来画图(个人比较喜欢用R可视化 ),保存之后,大概几个G的CSV文件,如果常规方法读入R,花费的时间比较久&#x…...
Java 静态代理详解:为什么代理类和被代理类要实现同一个接口?
在 Java 开发中,代理模式是一种常用的设计模式,其中代理类的作用是控制对其他对象的访问。代理模式分为静态代理和动态代理,在静态代理中,代理类和被代理类都需要实现同一个接口。这一机制为实现透明的代理行为提供了基础…...
OpenCV C++霍夫圆查找
OpenCV 中的霍夫圆检测基于 霍夫变换 (Hough Transform),它是一种从边缘图像中识别几何形状的算法。霍夫圆检测是专门用于检测图像中的圆形形状的。它通过将图像中的每个像素映射到可能的圆参数空间,来确定哪些像素符合圆形状。 1. 霍夫变换的原理 霍夫…...
H.264编解码介绍
一、简介 H.264,又称为AVC(Advanced Video Coding),是一种广泛使用的视频压缩标准。它由国际电信联盟(ITU)和国际标准化组织(ISO)联合开发,并于2003年发布。 H.264的发展历史可以追溯到上个世纪90年代。当时,视频压缩技术的主要标准是MPEG-2,但它在压缩率和视频质…...
Java | Leetcode Java题解之第450题删除二叉搜索树中的节点
题目: 题解: class Solution {public TreeNode deleteNode(TreeNode root, int key) {TreeNode cur root, curParent null;while (cur ! null && cur.val ! key) {curParent cur;if (cur.val > key) {cur cur.left;} else {cur cur.rig…...
【CViT】Deepfake Video Detection Using Convolutional Vision Transformer
文章目录 Deepfake Video Detection Using Convolutional Vision Transformerkey points**卷积视觉变压器**FLViT实验总结Deepfake Video Detection Using Convolutional Vision Transformer 会议/期刊:2021 作者: key points 提出了一种用于检测深度伪造的卷积视觉变压器…...
安卓主板_MTK4G/5G音视频记录仪整机及方案定制
音视频记录仪方案,采用联发科MT6877平台八核2* A78 6* A55主频高达2.4GHz, 具有高能低耗特性,搭载Android 12.0智能操作系统,可选4GB32GB/6GB128GB内存,运行流畅。主板集成NFC、双摄像头、防抖以及多种无线数据连接,支…...
Qt 教程全集目录公布(方便查阅)
点击上方"蓝字"关注我们 Qt 安装 以下是常见安装方法和软件获取 Qt4Qt5Qt6版本下载(在线和离线)【网址】...
云计算SLA响应时间的matlab模拟与仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 用matlab模拟,一个排队理论。输入一堆包,经过buffer(一个或者几个都行)传给server,这些包会在buffer里…...
ARTS Week 42
Algorithm 本周的算法题为 2283. 判断一个数的数字计数是否等于数位的值 给你一个下标从 0 开始长度为 n 的字符串 num ,它只包含数字。 如果对于 每个 0 < i < n 的下标 i ,都满足数位 i 在 num 中出现了 num[i]次,那么请你返回 true …...
10.2学习
1.IOC控制反转 IoC(Inverse of Control:控制反转)是⼀种设计思想,就是将原本在程序中⼿动创建对象的控制权,交由Spring框架来管理。 IoC 在其他语⾔中也有应⽤,并⾮ Spring 特有。 IoC 容器是 Spring⽤来实现 IoC …...
【数一线性代数】021入门
Index 推荐阅读:https://blog.csdn.net/weixin_60702024/article/details/141729949分析实现总结 推荐阅读:https://blog.csdn.net/weixin_60702024/article/details/141729949 给定二叉树的根节点root,计算其叶节点的个数。 分析实现 类似…...
(k8s)kubernetes中ConfigMap和Secret
转载:ConfigMap 一、ConfigMap介绍 ConfigMap是一种API对象,用来将非机密性的数据保存到键值对中。使用时,Pod可以将其用作环境变量、命令行参数或存储卷中的配置文件。 ConfigMap将你的环境配置信息和容器镜像解耦,便于应用配置…...
stm32四足机器人(标准库)
项目技术要求 PWM波形的学习 参考文章stm32 TIM输出比较(PWM驱动LED呼吸灯&&PWM驱动舵机&&PWM驱动直流电机)_ttl pwm 驱动激光头区别-CSDN博客 舵机的学习 参考文章 stm32 TIM输出比较(PWM驱动LED呼吸灯&&PWM驱动舵机&&PWM驱动直流电机)…...
基于Hive和Hadoop的共享单车分析系统
本项目是一个基于大数据技术的共享单车分析系统,旨在为用户提供全面的单车使用信息和深入的出行行为分析。系统采用 Hadoop 平台进行大规模数据存储和处理,利用 MapReduce 进行数据分析和处理,通过 Sqoop 实现数据的导入导出,以 S…...
Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
NPOI Excel用OLE对象的形式插入文件附件以及插入图片
static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...
代码规范和架构【立芯理论一】(2025.06.08)
1、代码规范的目标 代码简洁精炼、美观,可持续性好高效率高复用,可移植性好高内聚,低耦合没有冗余规范性,代码有规可循,可以看出自己当时的思考过程特殊排版,特殊语法,特殊指令,必须…...
HTTPS证书一年多少钱?
HTTPS证书作为保障网站数据传输安全的重要工具,成为众多网站运营者的必备选择。然而,面对市场上种类繁多的HTTPS证书,其一年费用究竟是多少,又受哪些因素影响呢? 首先,HTTPS证书通常在PinTrust这样的专业平…...
PydanticAI快速入门示例
参考链接:https://ai.pydantic.dev/#why-use-pydanticai 示例代码 from pydantic_ai import Agent from pydantic_ai.models.openai import OpenAIModel from pydantic_ai.providers.openai import OpenAIProvider# 配置使用阿里云通义千问模型 model OpenAIMode…...
如何把工业通信协议转换成http websocket
1.现状 工业通信协议多数工作在边缘设备上,比如:PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发,当设备上用的是modbus从站时,采集设备数据需要开发modbus主站;当设备上用的是西门子PN协议时…...
