深挖基于 CSS 的变换与动画技术

李俊才 的 CSDN 博客
邮箱 ：291148484@163.com
CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
本文地址：https://blog.csdn.net/qq_28550263/article/details/123649691

相关文章推荐：

  • vue3 中使用动画技术：https://blog.csdn.net/qq_28550263/article/details/122892028
TODO:
- 补充二维部分的案例；
- ★扩展写作三维变换。
目 录

1. 概述

2. 二维变换

  • 2.1 原点变换
  • 2.2 平移变换
    • 2.2.1 沿横轴平移:translateX()
    • 2.2.2 沿纵轴平移:translateY()
    • 2.2.3 双轴平移:translate()
  • 2.3 缩放与变形
    • 2.3.1 缩放

      • 2.3.1.1 沿 X 轴缩放：scaleX()
      • 2.3.1.2 沿 Y 轴缩放：scaleY()
      • 2.3.1.3 双轴同时缩放：scale()
    • 2.3.2 变形
      • 2.3.2.1 水平变形 skewX()
      • 2.3.2.2 垂直变形 skewY()
      • 2.3.2.3 双轴同时变形 skew()
  • 2.4 旋转（二维）
    • rotate()函数
  • 2.5 多重变换
  • 2.6 二维矩阵变换
    • 2.6.1 什么是矩阵变换
    • 2.6.2 matrix() 函数

3. 基于过度的动画

  • 3.1 什么是过度（transitions）
  • 3.2 过度定义的相关属性
    • 3.2.1 控制过度属性：transition-property属性
    • 3.2.2 控制过度快慢：transition-duration属性
    • 3.2.3 过渡计时函数属性：transition-timing-function属性
      • 3.2.3.1 缓动过度的概念
      • 3.2.3.2 线性缓动函数
      • 3.2.3.3 三次贝塞尔函数 和 弹性过度
        • 1. 关于贝塞尔函数
        • 2. CSS 中的cubic-bezier()函数
      • 3.2.3.3 步进的概念 与CSS 中的steps() 函数
        • 1 步进的概念
        • 2 CSS 中的steps() 函数语法
      • 3.2.3.4 步进的概念 与CSS 中的steps 函数
        • 1 步进的概念
        • 2 CSS 中的步进函数语法
    • 3.2.4 延时过度属性：transition-delay

4. CSS的关键帧动画

  • 4.1 从 过度 到 关键帧
  • 4.2 定义和使用关键帧序列动画
  • 4.3 曲线动画

5. 进阶 - 三维变换

附录

  • CSS可动画属性

1. 概述

本文详细介绍了 CSS 中的变换 和 关键帧动画。变换 会计算被变换元素上的没一点，然后得到其在本地坐标系中的一个坐标。从本质效果上看变换和关键帧动画都是动画，他们实现了两个或者多个样式状态之间切换的动态效果。

2. 二维变换

属性 描述 说明
transform-origin 指定原点的位置。默认值为元素的中心，可以被移动。很多变形需要用到这个属性，比如旋转，缩放和倾斜，他们都需要一个指定的点作为参数。
transform 指定作用在元素上的变形。取值为空格分隔的一系列变形的列表，他们会像被组合操作请求一样被分别执行。

2.1 原点变换

transform-origin属性用于控制原点的位置，指定不同的值可以对原点进行变换。

你可以使用top、bottom、center、right、left以及他们的组合来表示原点的位置，原点相对于盒子的位置如图示意：

例如：

transform-origin: center;

你也可以指定一个具体的值，如：

transform-origin: 10px 20px;

更多语法示范：

/* 单值语法 */
transform-origin: 2px;
transform-origin: bottom;/* x轴-偏移 | y轴-偏移*/
transform-origin: 3cm 2px;/* x轴-偏移-keyword | y轴-偏移*/
transform-origin: left 2px;/* x轴-偏移-keyword | y轴-偏移-keyword */
transform-origin: right top;/* y轴-偏移-keyword | x轴-偏移-keyword */
transform-origin: top right;/* x轴-偏移 | y-偏移| z轴-偏移 */
transform-origin: 2px 30% 10px;/* x轴-偏移-keyword | y轴-offset | z-偏移 */
transform-origin: left 5px -3px;/* x轴-偏移-keyword | y轴-offset-keyword | z-偏移 */
transform-origin: right bottom 2cm;/* y轴-偏移-keyword | x轴-offset-偏移 | z-偏移 */
transform-origin: bottom right 2cm;/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;

2.2 平移变换

平移指将元素沿着某个方向上移动到一个新的位置。你可以仅沿着某一个轴平移，也可以同时沿着两个轴平移，不管怎么样平移它的移动轨迹都是一条直线段。应用平移变换由以下三个函数：

平移变换 描述
translateX() 沿着横轴方向移动
translateY() 沿着纵轴方向移动
translate() 二维平面中任意方向平移

2.2.1 沿横轴平移:translateX()

语法

translateX(t)
参数 描述
t 代表了向量平移的横坐标长度<length> 或 <percentage>。百分比指的是盒子高度，盒子由属性 transform-box 定义。

例如

<body><div class="translate-x">translateX(50%)</div>
</body>
<style>
.translate-x {width: 150px;height:100px;background-color: #B1DCFF;color: #FF7B38;font-weight:bold;text-align: center;transition: all .3s linear;
}.translate-x:hover {transform: translateX(50%);
}
</style>

其效果如下：

2.2.2 沿纵轴平移:translateY()

语法

/* <length-percentage> values */
transform: translateY(200px);
transform: translateY(50%);

例如

<body><div class="translate-y">translateY(50%)</div>
</body>
<style>
.translate-y {width: 150px;height:100px;background-color: #B1DCFF;color: #FF7B38;font-weight:bold;text-align: center;transition: all .3s linear;
}.translate-y:hover {transform: translateY(50%);
}
</style>
</html>

其效果如下：

2.2.3 双轴平移:translate()

语法

<body><div class="translate">translate(50%,50%)</div>
</body>
<style>
.translate {width: 150px;height:100px;background-color: #B1DCFF;color: #FF7B38;font-weight:bold;text-align: center;transition: all .3s linear;
}.translate:hover {transform: translate(50%,50%);
}
</style>

例如

<body><div class="translate">translate(50%,50%)</div>
</body>
<style>
.translate {width: 150px;height:100px;background-color: #B1DCFF;color: #FF7B38;font-weight:bold;text-align: center;transition: all .3s linear;
}.translate:hover {transform: translate(50%,50%);
}
</style>

其效果如下：

2.3 缩放与变形

2.3.1 缩放

缩放函数 描述
scaleX() 沿着 X 轴缩放
scaleY() 沿着 Y 轴缩放
scale() 用于同时在 X 和 Y 轴上缩放

2.3.1.1 沿 X 轴缩放：scaleX()

scaleX(sx) 也可使用 scale(sx, 1) 或 scale3d(sx, 1, 1) 来表示（虽然很没有必要如此自己作弄自己），它表示将一个元素沿着横轴进行缩放。

语法

scaleX(s)

其中参数 s 表示方法的比例。

例如：

<html>
<head><meta charset="utf-8">
</head>
<body><p></p><p class="scale2"></p></body><style>
p{padding:0;border:0;margin:0;width: 50px;height: 50px;background-color: #cdcdcd;
}.scale2{transform: translateX(200%) scaleX(2); background-color: green;
}
</style>
</html>

其效果为：

2.3.1.2 沿 Y 轴缩放：scaleY()

scaleX(sx) 也可使用 scale(1, sy) 或 scale3d(1, sy, 1) 来表示，它表示将一个元素沿着纵轴进行缩放。

语法

scaleY(s)

例如

<html>
<head><meta charset="utf-8">
</head>
<body><p></p><p class="scale2"></p></body><style>
p{padding:0;border:0;margin:0;width: 50px;height: 50px;background-color: #cdcdcd;
}.scale2{transform: translateX(200%) scaleY(2); background-color: #FF7B38;
}
</style>
</html>

其效果为：

2.3.1.3 双轴同时缩放：scale()

图： scale(2, 2)

该变换用于对元素同时在 X 和 Y 轴上缩放，它通过一个二维向量确定在一个方向缩放的多少。如果缩放向量的两个坐标是相等的，那么所讲是均等的，或者说是各向同的，同时元素的形状是被保持的。这种情况下进行的是位似变换。

当坐标值处于区间 [-1, 1] 之外时，该变换将在相应的坐标方向上放大该元素，当处在区间之中时，该变换将在相应的坐标方向上缩小该元素。当值为1时将不进行任何处理，当为负数时，将进行像素点反射之后再进行大小的修改。

语法

scale(sx)
scale(sx, sy)
参数 描述
sx <number>，表示缩放向量的横坐标。
sy <number>，表示缩放向量的纵坐标。如果未设置，则他的默认值被设置为 sx。 从而使得元素在保持原有形状下均等缩放

例如：

<html>
<head><meta charset="utf-8">
</head>
<body><p></p><p class="scale2"></p></body><style>
p{padding:0;border:0;margin:0;width: 50px;height: 50px;background-color: #cdcdcd;
}.scale2{transform: translateX(200%) scale(2,2); /* scale(2,2) 简写为scale(2)，等同于同时使用变换: scaleX(2) scaleY(2);*/background-color: blue;
}
</style>
</html>

其效果为：

2.3.2 变形

形变函数 描述
skewX() 该转换将元素倾斜到二维平面上的 水平方向
skewY() 将元素倾斜到二维平面上的 垂直方向
skew() 维平面上的倾斜转换

2.3.2.1 水平变形 skewX()

语法
skewX(a)
参数 描述
a 是一个 <angle>，表示用于沿横坐标扭曲元素的角度。
例如
<body><div>无变形</div><div class="skewed">skewX变形</div>
</body>
<style>
div {width: 80px;height: 80px;background-color: skyblue;
}.skewed {transform: translate(200%, -100%)  skewX(35deg);;background-color: pink;
}
</style>

其效果如下：

2.3.2.2 垂直变形 skewY()

语法
skewY(a)
参数 描述
a 是一个 <angle>，表示元素沿纵坐标扭曲的角度。
例如
<body><div>无变形</div><div class="skewed">skewY变形</div>
</body>
<style>
div {width: 80px;height: 80px;background-color: skyblue;
}.skewed {transform: translate(200%, -70%)  skewY(35deg);;background-color: pink;
}
</style>

其效果如下：

2.3.2.3 双轴同时变形 skew()

语法
skew(ax)skew(ax, ay)
参数 描述
ax 是一个 <angle>，表示用于沿横坐标扭曲元素的角度。
ay 是一个 <angle> ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为0，导致纯水平倾斜。
例如
<body><div>无变形</div><div class="skewed">变形</div>
</body>
<style>
div {width: 80px;height: 80px;background-color: skyblue;
}.skewed {transform: translate(200%, -100%)  skew(60deg);background-color: pink;
}
</style>

其效果如下：

2.4 旋转

transform-origin属性还可以指定 rotate() 函数对元素进行旋转，这是一个二维的旋转函数。该函数对应的三维版本为rotate3d()。

旋转函数 描述 说明
rotate() 二维旋转
rotate3d() 三维旋转 见 三维变换部分
rotateX() 它可以让一个元素围绕 水平轴 旋转 见 三维变换部分
rotateY() 它可以让一个元素围绕 垂直轴 旋转，而不会对其进行变形。 见 三维变换部分

rotate()函数

rotate属性允许你单独设置transform的旋转属性。这种映射方式可以让我们更方便的设置我们想要的效果，并且避免了简写形式需要记忆属性顺序的不方便之处。

语法

/* Keyword values */
scale: none;/* Angle value */
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;/* x, y, or z axis name plus angle */
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;/* Vector plus angle value */
rotate: 1 1 1 90deg;

例如：

<body><div class="rotate">rotate(90deg)</div>
</body>
<style>
.rotate {width: 150px;height:100px;background-color: #cdcdcd;color: #FF7B38;font-weight:bold;text-align: center;transition: all .3s linear;
}.rotate:hover {transform: rotate(90deg);background-color: #B1DCFF;
}
</style>

其效果如下：

2.5 多重变换

提供给transform属性以至于以空格分隔形式的列表值，可以同时应用 多重变换，多重变换 是基于单个变换的先后顺序应用而成，列表项中的单个变换的先后顺序也就是多重变换的应用顺序。

在平移变换的例子中，我们就同时使用了两个变换：

transform: translateX(200%) scale(2,2);

当然我们也能够应用更多的变换，只要符合这个格式即可。

2.6 二维矩阵变换

2.6.1 什么是矩阵变换

在线性代数学中我们所使用的二次型（quadratic form）就是典型的矩阵变换，它在几何上看实际上就是求一个变换矩阵 X 将一个看起来 歪 这的图形 “扳正”，这是十分特殊的一类矩阵变换。事实上我们在图形上，可以使用一个变换矩阵X 来完成一个图形的平移、旋转、形变等多个变换的组合，当应用于二维图形时，这就是 CSS 中的 二维矩阵变换，在后面的章节中，一样的原理还有 三维矩阵变换。

变换函数 描述
matrix() 二维矩阵变换
matrix3d() 三维矩阵变换，见第5节 三维变换章节

2.6.2 matrix() 函数

语法

二维可以看作特殊的三维，因此 matrix(a, b, c, d, tx, ty) 可以看作是三维矩阵变换 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。其语法格式为：

matrix(a, b, c, d, tx, ty)
参数 描述
a b c d 描述线性变换的 <number> 。
tx ty 描述如何应用这个变换的 <number> 。
这些值表示以下函数： 
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

例如

<body><div></div><div class="changed"></div>
</body>
<style>
div {width: 80px;height: 80px;background-color: skyblue;
}.changed {transform: matrix(1, .5, -1, 1, 40, 40);background-color: pink;
}
</style>

其效果为：

3. 基于过度的动画

3.1 什么是过度（transitions）

CSS 过度（transitions）提供了一种 在更改CSS属性时控制动画速度 的方法。 实际上过度（transitions）是一种隐性动画，我们需要给浏览器指定两个状态，在两个状态之间使用过度可以让属性的变化成为一个持续一段时间的过程，而不是立即完成的。

3.2 过度定义的相关属性

属性 描述 说明
transition-property 指定哪个或哪些 CSS 属性用于过渡 只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。
transition-duration 指定过渡的时长 或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。
transition-timing-function 指定一个函数，定义属性值怎么变化 缓动函数 Timing functions 定义属性如何计算。多数 timing functions 由四点定义一个 bezier 曲线。也可以从 Easing Functions Cheat Sheet 选择缓动效果。
transition-delay 指定延迟时间 延迟指的是属性开始变化时与过渡开始发生时之间的时长。

3.2.1 控制过度属性：transition-property属性

该属性用于指定应用过渡属性的名称，附录中包含了可被用于动画的属性。如果指定简写属性（比如 background），那么其完整版中所有可以动画的属性都会被应用过渡。

属性值

属性值 描述
none 没有过渡动画。
all 所有可被动画的属性都表现出过渡动画。
IDENT 属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。

例如：

/* Keyword values */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property: all, -moz-specific, sliding;/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: unset;

3.2.2 控制过度快慢：transition-duration属性

transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。
概述性的值为<time>类型，例如：

/* <time> 值 */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;/* 全局值 */
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;

3.2.3 过渡计时函数属性：transition-timing-function

上文已经解释过，过度（transition） 其实是在两个状态之间产生一些列的中间值。属性 transition-timing-function 用于指定所使用的 过度计时函数 ，这些函数用于描述这些 中间值 是如何计算得到的。

实质上，通过这个函数会建立一条 加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。这条加速度曲线被 所定义，之后作用到每个CSS属性的过渡

有以下过度计时函数：

过度计时函数 描述 备注
linear 线性缓动函数 见线性缓动函数部分
ease-in-out 两头慢中间快 见三次贝塞尔缓动函数部分
ease 开始稍慢中间加快，接近终值时又逐渐变慢 见三次贝塞尔缓动函数部分
ease-in 开始快后来慢 见三次贝塞尔缓动函数部分
ease-out 开始慢后来快 见三次贝塞尔缓动函数部分
cubic-bezire() 自己来指定一个 三次贝塞尔缓动函数 。
这四个数字将曲线的点P1和P2指定为 ( x1 , y1 , x2 , y2 )。两个x值都必须在 [0, 1] 范围内，否则定义无效。 		见三次贝塞尔缓动函数部分
step() 包括 steps(<integer>[, <step-position> ]?)、step-start、step-end三个函数 见步进函数部分

3.2.3.1 缓动过度的概念

默认情况下，过度变化的速度并不是每一帧都相同，而是一开始的时候稍微慢一些，之后迅速加快，到接近最后的时候过度过程再次变慢。这个默认情况实际对应了transition-property属性的值为ease。
这种速度变化的过程称之为缓动，目的是让动画效果更加地自然流畅。

3.2.3.2 线性缓动函数

线性缓动函数是一个恒等函数，意味着它的输出进度值等于所有输入的输入进度值。线性缓动函数的语法就是linear关键字，即：

transition-timing-function: linear;

也可以在transition中指定transition-timing-function值为linear，例如：

transition: all .6s linear;

一个完整的例子如：

<html>
<head><meta charset="utf-8">
</head>
<body><div class="linear"></div>
</body>
<style>
.linear{width:100px;height:100px;background:blue;transition: all .6s linear;
}div:hover
{width:200px;height:200px;
}
</style>
</html>

3.2.3.3 三次贝塞尔函数 和 弹性过度

1. 关于贝塞尔函数

贝塞尔函数是数学上的一类特殊函数的总称，是下列常微分方程（一般称为贝塞尔方程）的标准解函数 y(x)y(x)y(x)：

x2d2ydx2+xdydx+(x2−α2)y=0x^2 \frac{d^2y}{dx^2} + x\frac{dy}{dx} + (x^2 - \alpha^2)y = 0 x2dx2d2y​+xdxdy​+(x2−α2)y=0

控制速度变化的数学函数在底层基于三次贝塞尔函数乘生成。通常这些函数都可以绘制成一条曲线，起点表示初始时间和初始值（P0P_0P0​）终点表示结束时间和结束值（P1P_1P1​）。

图： 三次贝塞尔函数 该图片来源于 MDN Docs

在上图中，三次贝塞尔曲线由四个点 P0P_0P0​、P1P_1P1​、P2P_2P2​ 和 P3P_3P3​ 定义。P0P_0P0​ 和 P3P_3P3​ 是曲线的起点和终点，在 CSS 中这些点是固定的，因为坐标是比率（横坐标是时间的比率，纵坐标是输出范围的比率）。P0P_0P0​是(0, 0)和表示初始时间或位置和初始状态，P3P_3P3​是(1, 1)和表示最后时间或位置和最终状态。

三次贝塞尔函数需要 4个参数 来计算随时间的变化，分别是两对xxx坐标、两对yyy坐标，他们扽别代表了控制曲线的两个 控制点。
由于这些曲线是连续的，它们通常用于平滑插值的开始和结束，因此有时称为缓动函数。

过度计时函数 描述 备注
ease-in-out 两头慢中间快 相当于 cubic-bezier(0.25, 0.1, 0.25, 1)
ease 开始稍慢中间加快，接近终值时又逐渐变慢 相当于cubic-bezier(0.42, 0, 1, 1)
ease-in 开始快后来慢 相当于 cubic-bezier(0, 0, 0.58, 1)
ease-out 开始慢后来快 相当于 cubic-bezier(0.42, 0, 0.58, 1)

这四个关键自函数产生的缓动函数图形如下所示：

图： 各个三次贝塞尔缓动函数关键字值产生的缓动函数 来源： W3C编辑草案文档

来源：Chrome 开发者工具：效果预览

2. CSS 中的cubic-bezier()函数

三次贝塞尔函数需要 4个参数 来计算随时间的变化。 cubic-bezier()函数符号定义三次贝塞尔曲线，它可以接受这些参数生成函数值作为缓动值。该函数的语法为：

cubic-bezier(x1, y1, x2, y2)

其中，x1, y1, x2, y2 的类型为<number>，代表定义三次贝塞尔曲线的 P1P_1P1​ 和 P2P_2P2​ 点的横坐标和纵坐标的值。x1 和 x2 必须在 [0, 1] 范围内，否则该值无效。

3.2.3.4 步进的概念 与CSS 中的steps 函数

1 步进的概念

所谓步进指的是过度是分为若干个步骤的，可以指定过度中的每一个步骤的状态。CSS提供了步进函数steps()，它非常适合用于创建 定格动画（stop-motion Animation）。
所谓 定格动画 是通过逐格地播放对象然后使之连续放映，从而产生仿佛活了一般的动画效果。

2 CSS 中的步进函数语法

CSS中一共有三个步进函数：

步进函数 描述
steps(<integer>[, <step-position> ]?) 它由多个步骤和一个步骤位置定义，是将输入时间划分为指定数量的等长间隔的缓动函数。详见下文。
step-start 计算得到 steps(1, start)
step-end 计算得到 steps(1, end)

其中：

图： 步进缓动函数关键字值示例 来源： W3C编辑草案文档

由于 step-start函数 和 step-end函数 是 steps() 函数 的特殊情况，因此我们接下来仅仅介绍 函数 steps(<integer>[, <step-position> ]?)。

深挖基于 CSS 的变换与动画技术相关推荐

  1. css任意高度收缩动画技术

    弹性动画学习 学习css世界后: 利用max-height和overflow:hidden来实现 HTML <div class="box"><input id= ...

  2. 深挖谷歌 DeepMind 和它背后的技术

    作者 | James Murphy 译者 | 天道酬勤 责编 | Carol 出品 | AI科技大本营(ID:rgznai100) 人工智能(AI)的子集已经成倍增长,并完成了只有人类才能完成的各种任 ...

  3. vue3 中使用动画技术

    vue3 中使用动画技术 作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?spm=1001.21 ...

  4. css可以做什么小船,基于css3小船水面游动动画特效

    基于css3小船水面游动动画特效,这是一款色彩鲜艳扁平风格的css3动画特效.效果图如下: 实现的代码. html代码: css代码: * { padding: 0; margin: 0; } bod ...

  5. html css 圆形按钮 仿uc,10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

  6. 深挖“窄带高清”的实现原理

    过去几年,又拍云一直在点播.直播等视频应用方面潜心钻研,取得了不俗的成果.我们结合点播.直播.短视频等业务中的用户场景,推出了"省带宽.压成本"系列文章,从编码技术.网络架构等角度 ...

  7. 如何使用 CSS 为 SVG 制作动画：示例教程

    8 分钟阅读 编者注:本文最后更新于 2022 年 7 月 12 日,以包含更多示例. Web 动画是一种乐趣,它通过提供视觉反馈.引导用户完成任务以及使网站整体变得活跃来改善用户体验.有几种方法可以 ...

  8. 自动（智能）驾驶系列| 插播 深挖自动驾驶数据集

    写在前面: 最近因为新项目的事情,到外地出差,没有太多时间更新深感抱歉~后续有时间会继续更新的!之前使用数据可能掌握数据的格式和特性放到网络中即可(是darknet格式的么等等),本文不是对如何使用数 ...

  9. 数睿数据深度 | 中国软件网对话数睿数据总裁刘超：深挖数据驱动、企业级无代码

    <你好,数智新世界>系列访谈 中国软件网对话数睿数据总裁刘超:深挖数据驱动.企业级无代码 摘要:数睿数据极致地追求企业级无代码. 中国软件网对话数睿数据总裁刘超 最近无代码在业界刮起了一股 ...

最新文章

  1. 只需2小时，成本不到7块，你我皆可制作的3D机器人
  2. [转] C# Winform 拦截关闭按钮触发的事件
  3. linux 无法启动vnc_vnc登录，10个步骤教你在Linux中VNC登陆
  4. ATL dll注册失败
  5. ViewRoot:处理消息+WMS交互+控制DecorView
  6. python如何计算字符宽度_Python中计算字符宽度
  7. json传输二进制的方案【转】
  8. Shiro介绍及主要流程
  9. 解决小目标检测问题的几个途径
  10. alter与alert区别
  11. PMP 与IPMP区别是什么？
  12. 图象关于y轴对称是什么意思_关于新风系统的全热交换到底是什么意思？艾尔文技术解读篇...
  13. Vue 双向数据绑定原理分析
  14. python 最准确的图片转文字软件_图片转文字软件哪个好用？免费的图片转文字软件...
  15. 计算机制图师岗位技能要求,机械制图员
  16. graphpad做折线图_Graphpad Prism搞定折线和曲线图，so easy！
  17. CocosCreater 发布apk接穿山甲广告SDK(一)
  18. 手机总是耗电太快，怎么办？
  19. 指数衰减学习率的staircase
  20. 华为鸿蒙OS能取代安卓吗？

热门文章

  1. 折半查找的平均查找次数分析
  2. 微程序控制器的组成及原理总结
  3. Matlab之程序的暂停与中止
  4. win10中plt绘图显示中文
  5. python 实现SOM：代码注释与应用示例
  6. 改善代码设计 —— 处理概括关系(Dealing with Generalization)
  7. Unity的学习笔记（XLua的初学用法并在lua中使用unity周期函数）
  8. 堆栈用数组和用链表实现
  9. 转：Python- 解决PIP下载安装速度慢
  10. ZOJ - 3624