阴影 — box-shadow

1
2
3
4
box-shadow: 
	[inset]
	[offset-x] [offset-y]
	[blur-radius] [spread-radius] [color];

Property

color

阴影的颜色，rgba() | hsla()。

1
box-shadow: green;

inset

如果没有指定inset，默认阴影在元素的border以外；反之，阴影在元素的border以内，它都是紧贴border。

1
box-shadow: inset;

offset

当没有设置inset时，以元素的左下角画 x-y 坐标轴拥有正负之分：

  • x轴右为正，左为负。
  • y轴下为正，上为负。

当设置inset时：

  • offset-x > 0，从边框左开始向右计算。
  • offset-x < 0，从边框右开始向左计算。
  • offset-y > 0，从边框上开始向下计算。
  • offset-y < 0，从边框下开始向上计算。
1
box-shadow: 10px 10px green;

blur-radius

阴影的外边缘廓通过高斯模糊算法向四周扩散，值为模糊的程度，会加在在原有的阴影尺寸上。

阮一峰-高斯模糊算法

1
box-shadow: 10px 10px 20px green;
#### spread-radius

spread-radius > 0，阴影扩大；

spread-radius < 0，阴影收缩。

1
box-shadow: 10px 10px 20px 10px green;

绘制原理

通过上面参数的描述，我们知道阴影的绘制步骤：

  1. 先画一个和元素一样的阴影图形，颜色自己设置的阴影颜色。
  2. 假设没有设置inset，通过你对offset-x与offset-y的设置来移动这个阴影图形。
  3. 如果设置了blur-radius，那么这个阴影图形以外边缘进行高斯模糊处理。
  4. 如果设置了spread-radius，那么它会去限制或扩散blur-radius设置的范围。

资料来源

MDN-boxshadow

掘金-深入了解 box-shadow

动画 — animation

1
2
3
4
animation: 
	<name> [duration] 
	[timing-function] [delay] [iteration-count]
	[direction] [fill-mode] [play-state];

Property

name

定义动画序列时，使用的名字。

1
animation-name: series;

通过 @keyframes 在动画序列中定义关键帧，可以按任意顺序列出关键帧百分比，将按照其应该发生的顺序来处理。

1
2
3
4
5
@keyframes series {
    from {}
    50% {}
    to {}
}

duration

指定动画周期时长，单位为秒或者毫秒，无单位值或负值无效。

1
animation-duration: [<time> | inherit | initial | unset];

timing-function

定义CSS动画每周期运行的节奏。

1
2
3
4
animation-timing-function: 
	[cubic-bezier(x1, y1, x2, y2) | 
	steps(number_of_steps, direction) | 
	linear | ease | ease-in | ease-in-out];

SF-贝塞尔曲线解析

MDN-timing-function

delay

从动画应用在元素上到动画开始的这段时间的长度（动画延迟时间）。

定义一个负值会让动画立即开始，如果设定值为-1s，动画会从它的动画序列的第1秒位置出立即开始。

1
animation-delay: [<time> | inherit | initial | unset];

iteration-count

定义动画在结束前运行的次数（动画循环执行次数），如果指定了多个值，每次播放动画时，将使用列表中的下一个值，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。

1
animation-iteration-count: [infinite | <number>];

direction

指示动画是否反向播放。

1
animation-direction: [normal | reverse | alternate | alternate-reverse];

fill-mode

设置CSS动画在执行之前和之后如何将样式应用于其目标。

1
animation-fill-mode: [none | forwards | backwards | both];

play-state

CSS属性定义一个动画是否运行或者暂停。

1
animation-play-state: [inherit | running | paused | unset];

可以通过查询animation-play-state来确定动画是否正在运行。

1
element.style.webkitAnimationPlayState = "paused";

资料来源

转换 — transform

允许你旋转、缩放、倾斜或平移给定元素。通过修改CSS视觉格式化模型的坐标空间来实现的。transform按从左到右的顺序相乘，这意味着transform的多个值按从右到左的顺序有效地应用。

1
transform: [<transform-function> | none | inherit | initial | unset] ...;

MDN-transform

MDN-transform-function

平移变换 — translate

允许你单独声明平移变换，并独立于 transform属性。

1
2
3
translate: 
	[length-percentage | length | none] 
	[length-percentage | length | none]

两个值分别代表 x-y 两个轴。

1
2
3
4
translate3d: 
	[length-percentage | length | none] 
	[length-percentage | length | none]
	[length-percentage | length | none]

三个值分别代表 x-y-z 三个轴。

过渡 — transition

1
transition: [property] [duration] [timing-function] [delay];

Property

property

指定应用过渡属性的名称。

1
transition-property: [none] [all] [css-property];

none 没有过渡动画

all 所有可被动画的属性都表现出过渡动画

css-property 属性名称（第一个字符不能时数字或破折号）可被用于动画的属性

transition-duration

transition-timing-function

transition-delay

资料来源

MDN-transition

远景 — perspective

1
perspective: [<length> | none | inherit | initial | unset]

指定观察者与 $z=0$ 平面的距离，使具有三维位置变换的元素产生透视效果（摄像点与平面距离的高度）。

$z > 0$ 时，三维元素比正常大；$z < 0$时，三维元素比正常小。

perspective-origin

1
2
3
perspective-origin: 
	[<length-percentage> | left | center | right] 
	[<length-percentage> | top | center | bottom];

指定了观察者的位置，用作 perspective 属性的摄像点。

第一个参数指定摄像点的横坐标右为正；第二个参数指定摄像点的纵坐标下为正。

资料来源

MDN-perspective

注意事项

  • 架高元素需要设置perspective，使架高元素挡住的元素一部分可见通过设置perspective-origin。
  • 3D容器可以通过设置transform-style: perserve-3d;
  • 单位错误会导致属性不可用。