前端小白的学习之路(CSS3 三)

提示：过渡属性transition,动画属性animation，转化属性transform,裁剪属性clip-path,倒影属性box-reflect，模糊度属性filter

目录

一、transition

二、animation

三、transform

四、clip-path

五、box-reflect

六、filter

---

一、transition

过渡：以看见标签从一个属性变化到另一个属性值的过程。

transition-property: 指定需要过渡的 CSS 属性。可以是单个属性名称，也可以是多个属性名称的列表，用逗号分隔。例如：width, height, color, 等。

transition-property: width;

transition-duration: 定义过渡的持续时间，以秒（s）或毫秒（ms）为单位。例如：0.5s, 1000ms

transition-duration: .5 s;

transition-timing-function: 定义过渡效果的时间函数。常见的时间函数包括 ease（默认值，慢速开始，然后加速）、linear（匀速）、ease-in（慢速开始）、ease-out（快速结束）、ease-in-out（慢速开始和结束），以及贝塞尔曲线函数等。

transition-timing-function: linear;
/*塞北尔曲线*/
transition-timing-function: cubic-bezier(0.035, 1.650, 0.670, 1.335);

transition-delay: 定义过渡开始之前的延迟时间，以秒（s）或毫秒（ms）为单位。例如：0.2s, 500ms。

transition-delay: 0s;

**transition:**简写属性

/*transition: property duration timing-function delay;*/
transition: width  .5s  0s  linear;

二、animation

**keyframes：**动画帧数，通过@来定义动画

@keyframes ani {
            from {
                width: 100px;
            }

            to {
                width: 1000px;
            }
        }

@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 中定义的动画名称。

animation-name: ani;

**animation-duration:**指定动画完成一个周期的持续时间，单位可以是秒（s）或毫秒（ms）。

animation-duration: 5s;

**animation-timing-function:**指定动画的时间函数，控制动画的速度变化，常用的有 linear、ease、ease-in、ease-out、ease-in-out 等。

animation-timing-function: linear;

**animation-delay:**指定动画开始前的延迟时间，单位可以是秒（s）或毫秒（ms）。

animation-delay: 0s;

**animation-iteration-count:**指定动画的播放次数，可以是一个数字值或者 infinite 表示无限循环播放。

animation-iteration-count: infinite;

**animation-direction:**指定动画播放的方向，可以是 normal（默认，从头到尾）、reverse（反向播放）、alternate（正向和反向交替播放）或者 alternate-reverse（反向和正向交替播放）。

animation-direction: reverse;

**animation-fill-mode:**指定动画在播放前后如何应用样式，可以是 none（默认，不改变样式）、forwards（在动画结束时应用最后一个关键帧的样 式）、backwards（在动画开始时应用第一个关键帧的样式）或者 both（同时应用 forwards 和 backwards）。

animation-fill-mode: forwards;

指定动画的播放状态，可以是 running（默认，播放状态）或者 paused（暂停状态）。

animation-play-state：paused

三**、**transform

用于对元素进行变换，包括旋转、缩放、移动和倾斜等。它可以通过不同的函数值来实现各种不同的变换效果。转换属性 (不会让标签脱离正常文档流)。

**transform-style:**设置3d空间

transform-style: preserve-3d;

perspective: 设置透视距离(眼睛到界面的距离视距) 近大远小

perspective: 500px; 

**translate:**沿 x 和 y 轴移动元素。可以单独指定 x 和 y 的偏移量，也可以只指定一个。

transform: translate(50px, 20px);
/*3D场景*/
transform: translate3d(0px,0px,0)

**rotate:**旋转元素。角度值可以是正值（顺时针旋转）或负值（逆时针旋转）。

transform: rotate(45deg);
/*3D*/
transform: rotate3d(1,1,0,0deg);

**scale:**缩放元素。可以分别指定 x 和 y 方向上的缩放比例，也可以只指定一个值（等比缩放）。

transform:scale(1);
transform:scale(1,.5);

**skew:**倾斜元素,沿x或y轴倾斜

transform: skew(0deg);

**组合用法：**可以组合多个变换函数来同时应用多种变换效果

 transform: rotate3d(1,1,0,0deg) translate3d(0px,0px,0) scale(1) skew(0deg);

四、clip-path

用于剪裁元素的可见部分。通过 clip-path 属性，可以定义一个 SVG 路径或基本形状，来确定元素的可见部分。

**circle：**裁剪圆形

 clip-path: circle(
                /* 半径 */
                100px
                /* 圆心坐标 */
                at 0px 0px);

**circle：**裁剪椭圆形

/* ellipse(x轴半径 y轴半径 at 圆心x 圆心y);*/
clip-path: ellipse(100px 30px at 100px 100px);

**clip-path:**裁剪多边形

/*每段裁剪之间用逗号隔开*/
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

五、box-reflect

于创建元素的倒影效果。这个属性允许你在元素的底部添加一个或多个镜像。但需要注意的是，这个属性在大多数现代浏览器中并不被支持。

box-reflect: <direction> <offset> <mask-box-image>;

• <direction>： 指定了镜像的方向。可以是 above（从上到下）、below（从下到上）、left（从左到右）、right（从右到左）。
• **<offset>：**指定了镜像的偏移量，用于控制镜像相对于元素的位置。
• **<mask-box-image>：**用于指定应用于镜像的遮罩图像。

六、filter

于对元素的可视化效果进行滤镜处理。它可以应用于图像、背景图片、SVG、文本以及任何可以使用 CSS 的可视化元素。

blur(): 模糊元素，可以指定模糊的半径。

filter: blur(3px);

brightness(): 调整元素的亮度，可以指定亮度的百分比。

filter: brightness(50%);

**contrast():**调整元素的对比度，可以指定对比度的百分比。

filter: contrast(200%);

grayscale(): 将元素转换为灰度图像，可以指定灰度的百分比。

 filter: grayscale(50%);

hue-rotate(): 旋转元素的色相，可以指定旋转的角度。

filter: hue-rotate(90deg);

**invert():**反转元素的颜色，可以指定反转的百分比。

filter: invert(100%);

opacity(): 调整元素的不透明度，可以指定不透明度的百分比。

filter: opacity(50%);

**saturate():**调整元素的饱和度，可以指定饱和度的百分比。

filter: saturate(200%);

**sepia():**将元素转换为深褐色，可以指定褐色的百分比。

filter: sepia(80%);