提示：过渡属性transition,动画属性animation，转化属性transform,裁剪属性clip-path,倒影属性box-reflect，模糊度属性filter
目录
一、transition
过渡：以看见标签从一个属性变化到另一个属性值的过程。
transition-property: 指定需要过渡的 CSS 属性。可以是单个属性名称，也可以是多个属性名称的列表，用逗号分隔。例如：width, height, color, 等。
css
transition-property: width;transition-duration: 定义过渡的持续时间，以秒（s）或毫秒（ms）为单位。例如：0.5s, 1000ms
css
transition-duration: .5 s;transition-timing-function: 定义过渡效果的时间函数。常见的时间函数包括 ease（默认值，慢速开始，然后加速）、linear（匀速）、ease-in（慢速开始）、ease-out（快速结束）、ease-in-out（慢速开始和结束），以及贝塞尔曲线函数等。
css
transition-timing-function: linear;
/*塞北尔曲线*/
transition-timing-function: cubic-bezier(0.035, 1.650, 0.670, 1.335);transition-delay: 定义过渡开始之前的延迟时间，以秒（s）或毫秒（ms）为单位。例如：0.2s, 500ms。
css
transition-delay: 0s;**transition:**简写属性
css
/*transition: property duration timing-function delay;*/
transition: width .5s 0s linear;二、animation
**keyframes：**动画帧数，通过@来定义动画
css
@keyframes ani {
from {
width: 100px;
}
to {
width: 1000px;
}
}
css
@keyframes ani {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-631px);
}
50% {
transform: translateX(-1262px);
}
75% {
transform: translateX(-1893px);
}
100% {
transform: translateX(-2524px);
}
}**animation-name:**指定要应用的动画名称，对应于 @keyframes 中定义的动画名称。
css
animation-name: ani;**animation-duration:**指定动画完成一个周期的持续时间，单位可以是秒（s）或毫秒（ms）。
css
animation-duration: 5s;**animation-timing-function:**指定动画的时间函数，控制动画的速度变化，常用的有 linear、ease、ease-in、ease-out、ease-in-out 等。
css
animation-timing-function: linear;**animation-delay:**指定动画开始前的延迟时间，单位可以是秒（s）或毫秒（ms）。
css
animation-delay: 0s;**animation-iteration-count:**指定动画的播放次数，可以是一个数字值或者 infinite 表示无限循环播放。
css
animation-iteration-count: infinite;**animation-direction:**指定动画播放的方向，可以是 normal（默认，从头到尾）、reverse（反向播放）、alternate（正向和反向交替播放）或者 alternate-reverse（反向和正向交替播放）。
css
animation-direction: reverse;**animation-fill-mode:**指定动画在播放前后如何应用样式，可以是 none（默认，不改变样式）、forwards（在动画结束时应用最后一个关键帧的样 式）、backwards（在动画开始时应用第一个关键帧的样式）或者 both（同时应用 forwards 和 backwards）。
css
animation-fill-mode: forwards;指定动画的播放状态，可以是 running（默认，播放状态）或者 paused（暂停状态）。
css
animation-play-state：paused三**、**transform
用于对元素进行变换，包括旋转、缩放、移动和倾斜等。它可以通过不同的函数值来实现各种不同的变换效果。转换属性 (不会让标签脱离正常文档流)。
**transform-style:**设置3d空间
css
transform-style: preserve-3d;perspective: 设置透视距离(眼睛到界面的距离视距) 近大远小
css
perspective: 500px; **translate:**沿 x 和 y 轴移动元素。可以单独指定 x 和 y 的偏移量，也可以只指定一个。
css
transform: translate(50px, 20px);
/*3D场景*/
transform: translate3d(0px,0px,0)**rotate:**旋转元素。角度值可以是正值（顺时针旋转）或负值（逆时针旋转）。
css
transform: rotate(45deg);
/*3D*/
transform: rotate3d(1,1,0,0deg);**scale:**缩放元素。可以分别指定 x 和 y 方向上的缩放比例，也可以只指定一个值（等比缩放）。
css
transform:scale(1);
transform:scale(1,.5);**skew:**倾斜元素,沿x或y轴倾斜
css
transform: skew(0deg);**组合用法：**可以组合多个变换函数来同时应用多种变换效果
css
transform: rotate3d(1,1,0,0deg) translate3d(0px,0px,0) scale(1) skew(0deg);四、clip-path
用于剪裁元素的可见部分。通过 clip-path 属性，可以定义一个 SVG 路径或基本形状，来确定元素的可见部分。
**circle：**裁剪圆形
css
clip-path: circle(
/* 半径 */
100px
/* 圆心坐标 */
at 0px 0px);**circle：**裁剪椭圆形
css
/* ellipse(x轴半径 y轴半径 at 圆心x 圆心y);*/
clip-path: ellipse(100px 30px at 100px 100px);**clip-path:**裁剪多边形
css
/*每段裁剪之间用逗号隔开*/
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);五、box-reflect
于创建元素的倒影效果。这个属性允许你在元素的底部添加一个或多个镜像。但需要注意的是，这个属性在大多数现代浏览器中并不被支持。
css
box-reflect: <direction> <offset> <mask-box-image>;<direction>： 指定了镜像的方向。可以是above（从上到下）、below（从下到上）、left（从左到右）、right（从右到左）。- **
<offset>：**指定了镜像的偏移量，用于控制镜像相对于元素的位置。 - **
<mask-box-image>：**用于指定应用于镜像的遮罩图像。
六、filter
于对元素的可视化效果进行滤镜处理。它可以应用于图像、背景图片、SVG、文本以及任何可以使用 CSS 的可视化元素。
blur(): 模糊元素，可以指定模糊的半径。
css
filter: blur(3px);brightness(): 调整元素的亮度，可以指定亮度的百分比。
css
filter: brightness(50%);**contrast():**调整元素的对比度，可以指定对比度的百分比。
css
filter: contrast(200%);grayscale(): 将元素转换为灰度图像，可以指定灰度的百分比。
css
filter: grayscale(50%);hue-rotate(): 旋转元素的色相，可以指定旋转的角度。
css
filter: hue-rotate(90deg);**invert():**反转元素的颜色，可以指定反转的百分比。
css
filter: invert(100%);opacity(): 调整元素的不透明度，可以指定不透明度的百分比。
css
filter: opacity(50%);**saturate():**调整元素的饱和度，可以指定饱和度的百分比。
css
filter: saturate(200%);**sepia():**将元素转换为深褐色，可以指定褐色的百分比。
css
filter: sepia(80%);