前端小白的学习之路(CSS3 三)-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端小白的学习之路(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>：用于指定应用于镜像的遮罩图像。