CSS3变换-过渡-动画-多列布局_css如何分布设置动画-优快云博客

本文链接：https://blog.youkuaiyun.com/wj18740503137/article/details/124458952

CSS3变换

一、2D变换

1、2D位移

1-1、translateX()

属性：
	translateX()	设置水平方向的位移，指定一个值；
属性值：
	 px，像素。
	 %，相对于自身的宽度来计算（包括内容区，边框，内边距）

1-2、translateY()

属性：
	translateY()	设置垂直方向的位移，指定一个值；
属性值：
	 px，像素。
	 %，相对于自身的宽度来计算（包括内容区，边框，内边距）

1.3、translate

属性：
	translate	同时设置水平和垂直方向的位移，可以指定两个值，只指定一个值表示水平方向；
属性值：
	 px，像素。
	 %，相对于自身的宽度来计算（包括内容区，边框，内边距）

1.4、链式使用

1) 多个变形方法一个接着一个，中间使用空格分隔。
2) 多个变形方法一次只处理一个，从第一个开始一直到最后一个。

1-5水平垂直居中

	子绝父相;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);

1-6、小结

1. translate	中的百分比单位是相对于自身元素的 
2. translate	类似定位，不会影响到其他元素的位置
3. 对行内标签没有效果(position:absolute可以使行内标签变成行内块标签)

2、2D旋转

属性：
	rotate
属性值：
	（deg）角度
语法：
	transform:rotate(30deg)
	
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

3、2D缩放

3-1、scaleX()

设置水平方向的缩放比例，指定一个值，值是个数字。

3-2、scaleY()

设置垂直方向的缩放比例，指定一个值，值是个数字。

3-3、scale()

	同时设置水平方向和垂直方向的缩放比例， 如果两个值分别是水平方向和垂直方向，如果指定一个值同时设置两个方向相同的缩放比例。 值是数字。

3-4、总结

1) transform:scale(1,1) 放大一倍 相对于没有放大
2) transform:scale(2,2) 宽和高都放大了2倍
3) transform:scale(2) 只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2)
4) transform:scale(0.5,0.5) 缩小
5) transform:scale(-2,-2) 反向放大2倍 很少用负数 容易让人产生误解

3-5、面试题

使用缩放来实现字体小于12px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box01 {
            font-size: 12px;
        }

        .box02 {
            font-size: 20px;
            transform: scale(.5);
        }
    </style>
</head>
<body>
    <p class="box02">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati soluta, voluptatibus perspiciatis, unde vero excepturi sit culpa ut dignissimos rerum dolor neque quaerat explicabo voluptatem velit optio quasi cumque quia!</p>
</body>
</html>

4、2D扭曲

4-1、skewX()

元素在水平方向扭曲。如果只为正数，元素的左上角和右下角将会被 拉扯。如果值为负数，元素的右上角和左下角会被 拉扯;

4-2、skewY()

元素在垂直方向扭曲变形。如果只为正数，元素的左上、右下将会被 拉扯。如果只为负数，元素的右上、左下将会被 拉扯。

4-3、skew()

 x 表示在x轴上的倾斜角度，单位为 deg。
 y 表示在y轴上的倾斜角度，单位为 deg。

5、多重变换

CSS3支持多重变形`transform:translate(-50%, -50%) rotate(45deg);`

6、transform-origin

设置或检索对象以某个原点进行转换。
	
	1) 如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
	2) 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
	3) transform-origin:**50% 50%;** 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
	4) transform-origin:**top left;** 左上角 和 transform-origin：0 0;相同
	5) transform-origin:**50px 50px;** 距离左上角 50px 50px 的位置
	6) transform-origin：**0**; 只写一个值的时候 第二个值默认为 50%;

二、3D变换

1、开启3D空间

属性1：
	transform-style	 指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
属性值：
	  flat： (默认)指定子元素位于此元素所在平面内
	  preserve-3d： 指定子元素定位在三维空间内
【注意】
	  决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 `transform-style` 属性。
	  
属性2：
	perspective 	景深，指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。
属性值：
	 none： 不指定透视 （默认值）
	 <length> ： 指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值。「z>0」的三维元素比正常大，而「z<0」时则比正常小。

2、3D位移

2-1、translateZ()Z

translateZ()    指定对象Z轴的平移

2-2translate3d(X,Y,Z)

	指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

3、3D缩放

3-1、scaleZ()

scaleZ()	指定对象的z轴缩放

3-2、scale3d(X,Y,Z)

	指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

4、3D旋转

4-1、rotateX()

rotateX()	指定对象在x轴上的旋转角度

4-2、rotateY()

rotateY()	指定对象在y轴上的旋转角度

4-3、rotateZ()

rotateZ()	指定对象在z轴上的旋转角度

5、观察者位置

属性：
	perspective-origin	设置透视点的位置，给父元素设置
属性值：
	left 
	right
	center 
	`<lenght>` 
	`<percentage>` 
	top
    bottom

6、背面是否可见

属性：
	 backface-visibility	指定元素背面面向用户时是否可见。
属性值：
	visible:	 (默认)指定元素背面可见，允许显示正面的镜像。 
	hidden： 指定元素背面不可见

【注意】
	决定一个元素背面面向用户时是否可见，需要直接在该元素上定义 `backface-visibility` 属性，而不能在其父元素上，因为该属性默认为不可继承

CSS3过渡

1、transition-property

属性：
	transition-property
属性值：
	 none，不过渡任何属性。
	 all，过渡所有的属性。
可以被过渡的属性有：
	颜色属性 具有长度值 百分比的属性 值是数字的属性 如 z-index opacity outline-offset等 变形系列属性 阴影 渐变
	一般来说属性能够使用数字值的一般都支持过渡，不能转换为数值的关键字不支持过渡。

2、transition-duration

属性：
	transition-duration		指定一个状态过渡到另外一个状态要经过多久
属性值：
	- 默认值是0，即没有过渡时间。
	- 值可以是s或ms，只能是正数，一般来说较好的体验值是`100~200ms`。
	- 值可以逗号分隔的时间长度列表。
  	- 如果想让列表中的所有属性都持续一个时间那就写一个值。
  	- 如果想让每个属性都持续不同的时间那就写一个时间的列表。

3、transition-delay

transition-delay	属性指的是开始过渡的延迟。

4、transition-timing-function

属性：
	transition-timing-function		设置对象中过渡的动画类型
属性值：
	+ ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
	+ linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
	+ ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
	+ ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
	+ ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
	+ cubic-bezier( number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间
	+ step-start： 等同于 steps(1, start)
	+ step-end： 等同于 steps(1, end)
	+ steps( integer [, [ start | end ] ]?)： 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

在线制作贝塞尔曲线： https://cubic-bezier.com/#.17,.67,.83,.67

5、CSS3触发过渡的条件

- 伪类触发
- 媒体查询
- JavaScript触发

CSS3动画

1、关键帧

	众所周知，一段动画，从本质上讲就是一段时间内连续播放的一定数量的画面。每一张画面，我们管它叫做“帧”。一定时间内连续快速播放若干个帧，就成了人眼中所看到的动画。同样时间内，播放的帧数越多，画面看起来越流畅。
	关键帧指的是，在构成一段动画的若干帧中，起到决定性作用的2-3帧。

2、动画语法

2-1、基本使用

关键帧的作用用来设置“由这个状态变成那个状态
 /* 创建关键帧 1*/
@keyframes keyName{
  0%{
    property1:value1;
  }
  ...
  100%{
    property2:value2;
  }
}
 /* 创建关键帧 2*/
 @keyframes testKey {
    from {

      }
    o {
      transform: translateX(600px)
       }
     } 
 @keyframes testKey2 {
            0% {
                background-color: red;
            }
            20% {
                background-color: orange;   
            }
            40% {
                background-color: green;   
            }
            60% {
                background-color: pink;
            }
            80% {
                background-color: cyan;
            }
            100% {
                background-color: purple;
            }
        }
	0%、100%表示动画播放到0%和100%的时候分别希望某个元素的属性值是什么。

	50%，表示动画持续时间执行到50%的时候的值。


/* 目标元素调用动画函数 */
animation-name:value;

animation-name: testKey,testKey2;
  + none，没有规则名称（默认），没有动画效果。
  + 规则名，使用`@keyframes`定义的动画名。
/* 设置动画所需的时间 */
animation-duration: 5s;

2-2、相关属性

animation-name					指定关键帧的名字，多个关键字用逗号隔开。

animation-duration  			指定动画的执行时间，单位是 s。

animation-delay 				指定对象动画的延迟时间

animation-iteration-count 		指定动画的具体循环次数

  + number:		动画循环次数
  + infinite： 	无限循环

animation-direction 			设置对象动画在循环中是否反向运动

  + normal： 	正常方向 (默认)
  + reverse： 	反方向运行
  + alternate： 	动画先正常运行再反方向运行，并持续交替运行
  + alternate-reverse： 动画先反运行再正方向运行，并持续交替运行

animation-fill-mode 			设置对象动画时间之外的状态

  + none： 默认值。不设置对象动画之外的状态
  + forwards： 设置对象状态为动画结束时的状态
  + backwards： 设置对象状态为动画开始时的状态
  + both： 设置对象状态为动画结束或开始的状态

animation-play-state 			设置对象动画的状态

  + running： 运动 (默认)
  + paused： 暂停

animation  复合属性，设置多个值

  如果只设置一个时间表示 duration，设置了两个时间分别是 duration 和 delay。其他子属性的值没有数量和顺序要求

CSS3多列布局

1、基本使用

属性1：
     column-count: 设置列数;
属性值：
	 auto： 根据 `column-width` 自定分配宽度
	 number： 用整数值来定义列数。不允许负值
属性2：
	column-width	 设置每列的宽度（类似于最小宽度）
属性值：
	 auto： 根据 `column-count`> 自定分配宽度
	 length： 用长度值来定义列宽。不允许负值
属性3：
	columns	 设置的列数和每列的宽度。复合属性
属性值：
	columns：<' column-width '> || <' column-count '>
属性4：
	column-gap	 设置列与列之间的间隙
属性值：
	 normal： 与 `font-size` 大小相同。假设该对象的`font-size`为16px，则normal值为16px，类推。
	 length ： 用长度值来定义列与列之间的间隙。不允许负值 。
属性5：
	column-rule-width	 列与列之间的边框厚度
属性值：
	 length： 用长度值来定义边框的厚度。不允许负值
	 medium： 定义默认厚度的边框。
	 thin： 定义比默认厚度细的边框。
	 thick： 定义比默认厚度粗的边框。
属性6：
	column-rule-style	 列与列之间的边框样式
属性值：
	 none： 无轮廓。`column-rule-color` 与`column-rule-width` 将被忽略
	 hidden： 隐藏边框。
	 dotted： 点状轮廓。
	 dashed： 虚线轮廓。
	 solid： 实线轮廓
	 double： 双线轮廓。
	 groove： 3D凹槽轮廓。
	 ridge： 3D凸槽轮廓。
	 inset： 3D凹边轮廓。
	 outset： 3D凸边轮廓。
属性7：
	column-rule-color	 列与列之间的边框颜色
	
属性8：
	column-rule: 1px dashed #ccc;
	
属性9：
	column-span	 对象元素是否横跨所有列
属性值：
	 none： 不跨列 (默认)
	 all： 横跨所有列
	 一般用于标题
属性10：
	column-break-before		 对象之前是否断行
属性值：
	+ auto： 既不强迫也不禁止在元素之前断行并产生新列 (默认)
	+ always： 总是在元素之前断行并产生新列
	+ avoid： 避免在元素之前断行并产生新列
	+ 添加私有前缀
属性11：
	column-break-after	 对象之后是否断行
属性值：
	 auto： 既不强迫也不禁止在元素之后断行并产生新列 (默认)
	 always： 总是在元素之后断行并产生新列
	 avoid： 避免在元素之后断行并产生新列
	 添加私有前缀
属性12：
	column-break-inside 对象内部是否断行
属性值：
	 auto： 既不强迫也不禁止在元素内部断行并产生新列 (默认)
	 avoid： 避免在元素内部断行并产生新列