css紧急学笔记

最新推荐文章于 2025-10-25 05:28:13 发布

原创最新推荐文章于 2025-10-25 05:28:13 发布 · 967 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#css #笔记 #前端 #学习

css紧急学_1

1、transform

2D 变换

1.translate_位移

位移

div{
    transform: translate(px);
}

1值：水平位移
2值：水平，垂直

水平是 x轴，但是垂直不是印象中的 y轴，这里的 y轴是向下的，就是说设置正值往下移

左X，右Y，前Z

单独设置：

translateY()
translateX()
还有个 z，是3D之后在写

百分比：

div{
    transform: translate(100%);
}

就是向 x轴移动自己的 **宽 * 百分比 **的像素，100%就是移动个自己

注：以前的百分比是看父宽高的，这个是看自己的

2.scale_缩放

缩放

transform: scale(没有单位);

1值：两个都缩放，和上一个不一样

单独：

scaleX()
scaleY()
也有 z

可使用scale让字体小到比最小的字体大小还要小

3.rotate_旋转

旋转

transform: rotate(deg);

1值：Z轴，正数顺时针，负数逆时针
多值：3D

单独：

rotateZ：2D 只有 Z轴旋转

4.skew_扭曲

扭曲，不常用

单位：deg

单独：x,y

5.多重变换

就是在这个函数后面写函数，如：

div{
    transform: translate(px) scale(没有单位) ...;
}

但是如果缩放放在使用百分比的位移前面，那么会位移少

变换都是沿着坐标轴变的

如果在位移前，先转歪了，就会沿着歪的方向位移

6.transform-origin_原点变换

之前的旋转不是按照这个中心店转的嘛，改这个就可以改中心点

transform-origin: 100px 100px;
transform-origin: top right;

1值（数值）：改x，y取中心

1值且y 关键字：改y，x取中心。如：transform-origin: top ;

2、3D变换

3D使用条件：在父元素开启3D空间

transform-style: preserve-3d;

1.景深

设置眼睛和屏幕的距离（近大远小）

/*父元素*/
perspective: 500px;

2.透视点位置

设置眼睛搁哪看

perspective-origin: left bottom;

3.位移

变z，就是变大

transform: translate3d(x,y,z);	/*少一个不行*/
transform: translateZ(值);

4.旋转

transform: rotate3d(1,1,1,45deg);

前三个值：x,y,z 转不转（1转，0不转），最后一个：转都少度

完了之后，就全给转上

5.fw缩放

scaleZ(数字（没单位）)
scale3d(x,y,z)

因为html没厚度，这个scaleZ的作用就是让你的景深 / 这个数字

3、transition过渡

1.基本使用

.d2{
    background: cadetblue;
}
.d1:hover {
   .d2{
        width: 800px;
        background: lawngreen;
        /* 设置哪个属性需要过渡 设置 all 过渡所有*/
        transition-property: width background;
        /* ms s 单位 */
        transition-duration: 3s;
   } 
}

**transition-property：**过渡的属性
**transition-duration：**过渡所需的时间

如果property不是 all，是单独设置的。duration 也可以单独设置，分别给两个属性设置延迟

2.过渡方式

默认的过渡方式是：ease（平滑速度），速度是慢 > 快 > 慢

transition-timing-function: linear;

linear 就是匀速，还有一百万个方式，详情看视频：181_CSS3_过渡_哔哩哔哩_bilibili

3.复合属性

transition: all 2s 1s linear;

过渡方式、过渡时间、延迟时间、过渡属性一块写，顺序只用记：第一个时间是过渡时间，第二个时间是延迟时间

4、动画

简单动画步骤：

设置动画名
定义动画
持续时间

1.设置动画名

animation-name: 随便什么名;

animation-name: haha;

2.定义动画

@keyframes 动画名{}

@keyframes haha{
    /* 第一帧 */
    from{
        /* 需要在第一帧发生变化在写 */
    }
    /* 最后一帧 */
    to{
        transform: translate(700px);
        background: lawngreen;
    }
}

3.设置持续时间

animation-duration: m / ms;

.d2{
    /* 设置动画名（就跟设置变量名一样） */
    animation-name: haha;
    /* 动画持续的时间 */
    animation-duration: 2s;
} 
/* 可以在使用后定义 */
@keyframes haha{
    /* 第一帧 */
    from{
        /* 需要在第一帧发生变化在写 */
    }
    /* 最后一帧 */
    to{
        transform: translate(700px);
        background: lawngreen;
    }
}

4.设置延迟

animation-delay: m / ms

animation-delay: 1s;

5.设置帧们

之前是 from 和 to

@keyframes haha{
    /* 第一帧 */
    0%{
        /* 需要在第一帧发生变化在写 */
    }
    /* 最后一帧 */
    100%{
        transform: translate(700px);
        background: lawngreen;
    }
}

那当然可以使用 29% 55%…

6.动画方式

animation-timing-function 和上面的过渡方式基本差不多，除了一个：

6.1 steps

animation-timing-function: steps(30);

动画以30帧的方式运行

7.动画次数

animation-iteration-count: 次数

animation-iteration-count: infinite;

infinite 是无限循环

8.动画方向

animation-direction: 方向

animation-direction: alternate;

方向们：

normal默认值
reverse反方向
alternate往复
alternate-reverse从反方向往复

9.动画最后的位置

animation-fill-mode

animation-fill-mode: forwards;

forwards最后结束的位置

10.动画的暂停

animation-play-state

animation-play-state: paused;

paused就是暂停

可以让他在完成某一个条件时暂停，比如：hover

11.复合属性

animation: alternate 2s 1s forwards haha 3;

还是，第一个秒是持续，第二个延迟