CSS重点知识整理1

[1 平面位移](#1 平面位移)

[1.1 基本使用](#1.1 基本使用)

[1.2 单独方向的位移](#1.2 单独方向的位移)

[1.3 使用平面位移实现绝对位置居中](#1.3 使用平面位移实现绝对位置居中)

[2 平面旋转](#2 平面旋转)

[2.1 基本使用](#2.1 基本使用)

[2.2 圆点转换](#2.2 圆点转换)

[2.3 多重转换](#2.3 多重转换)

[3 平面缩放](#3 平面缩放)

[3.1 基本使用](#3.1 基本使用)

[3.2 渐变的使用](#3.2 渐变的使用)

[4 空间转换](#4 空间转换)

[4.1 空间位移](#4.1 空间位移)

[4.1.1 基本使用](#4.1.1 基本使用)

[4.1.2 透视](#4.1.2 透视)

[4.2 空间旋转](#4.2 空间旋转)

[4.3 立体呈现案例](#4.3 立体呈现案例)

[5 动画](#5 动画)

[5.1 基本使用](#5.1 基本使用)

[5.2 动画的其它相关属性](#5.2 动画的其它相关属性)

[5.2.1 linear 设置匀速](#5.2.1 linear 设置匀速)

[5.2.2 分布动画](#5.2.2 分布动画)

[5.2.3 延迟时间](#5.2.3 延迟时间)

[5.2.4 重复次数](#5.2.4 重复次数)

[5.2.5 动画方向 alternate](#5.2.5 动画方向 alternate)

[5.2.6 执行完毕的状态](#5.2.6 执行完毕的状态)

[5.2.7 动画的拆分写法](#5.2.7 动画的拆分写法)

1 平面位移

1.1 基本使用

语法： translate(水平移动距离, 垂直移动距离)

**取值：**正负均可，X轴正向为右，Y轴正向为下

css 复制代码

    <style>
        .father{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background-color: red;
            border: 2px solid black;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 1px solid black;
            transition: all 2s;
        }

        /* 父元素的hover事件，子元素的样式改变 */
        .father:hover .child {
            /* transform: translate(50px, 50px); */  
            /* transform: translate(-50px, -50px); */

            /* 给的是百分比的话，参考盒子自身尺寸计算结果 */
            transform: translate(50%, 50%);
        }
    </style>

可以给子元素添加：transition: all 2s; 过渡属性

1.2 单独方向的位移

单独方向的移动：

transform: translateX(水平移动距离);

transform: translateY(垂直移动距离);

css 复制代码

    <style>
        .father{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background-color: red;
            border: 2px solid black;
        }
        .child {
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 1px solid black;
            transition: all 2s;
        }

        /* 父元素的hover事件，子元素的样式改变 */
        .father:hover .child {
            /* transform: translateX(50px); */
            transform: translateY(50px);
        }
    </style>

1.3 使用平面位移实现绝对位置居中

css 复制代码

    <style>
        .father{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
            border: 2px solid black;
        }
        .child {
            position: absolute;
            left: 50%;
            top: 50%;

            /* 1.之前的写法 */
            /* margin-left: -50px;
            margin-top: -50px; */

            /* 2.位移写法 */
            transform: translateX(-50px) translateY(-50px);
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 1px solid black;
        }
    </style>

2 平面旋转

2.1 基本使用

css 复制代码

    <style>
        img {
            display: block;
            margin: 100px auto;
            width: 300px;
            border: 1px solid black;
            transition: all 1s;  /* 旋转效果必须配合过渡，才有效 */
        }
        img:hover {
            /* 取值为正数顺时针，负数为逆时针 */
            transform: rotate(360deg);  
        }
    </style>

旋转效果必须配合过渡transition，才有效

2.2 圆点转换

转换圆点：transform-origin: 圆点水平位置，圆点垂直位置;

取值：

方位名词：left、right、top、bottom、center

百分比：0%、50%、100% (参照盒子自身尺寸)

像素：100px、200px

2.3 多重转换

css 复制代码

    <style>
        /* 旋转和位移   tranform混合属性实现多形态转换 */
        .box {
            width: 700px;
            height: 100px;
            border: 2px solid black;
            overflow: hidden;
        }

        img {
            width: 150px;
            height: 100px;
            transition: all 3s;
        }

        .box:hover img {
            transform: translateX(550px) rotate(360deg);
            /* 必须先有位移，才能有旋转效果， 不能颠倒顺序 */
            /* 因为先旋转会改变坐标轴方向 ，位移的方向会受影响*/
        }
    </style>

3 平面缩放

语法：

transform: scale(缩放倍数);

一般情况下：只为scale设置一个值，表示x轴和y轴等比例缩放，大于1放大，小于1缩小，等于1保持不变

3.1 基本使用

css 复制代码

    <style>
        .box{
            margin: 100px auto;
            width: 300px;
            height: 300px;
            border: 2px solid black;

        }
        img {
            width: 300px;
            height: 300px;
            transition: all 1s;
        }

        .box:hover img {
            /* 没有单位 */
            transform: scale(1.5);  
            transform: scale(0.6);
        }
    </style>

3.2 渐变的使用

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
    <style>
        .box{
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        img {
            width: 100%;
            height: 100%;
        }

        .box .mask{
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background-image: linear-gradient(
                /* transparent 表示透明色 */
                transparent,
                rgba(0, 0, 0, 0.5)
            );

            opacity: 0;
            transition: all 0.5s;
        }

        .box:hover .mask{
            opacity: 1;   
        }
    
    </style>
</head>
<body>
    
    <div class="box">
        <img src="./images/girl2.jpg" alt="">

        <!-- 添加渐变背景的盒子 -->
        <!-- 遮罩层 -->
        <div class="mask"></div>
    </div>
</body>
</html>

4 空间转换

**空间：**是从坐标轴角度定义。x, y, z三条坐标轴构成一个立体空间，z轴位置

与视线方向相同的为正方向。负值指向里。

使用的属性也是 transform

4.1 空间位移

4.1.1 基本使用

语法：

transform: translate3d(水平移动距离);

css 复制代码

    <style>
        body {
            perspective: 1000px;
        }
        .box {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            border: 2px solid black;
            transition: all 1s;

        }

        .box:hover {
            transform: translate3d(100px, 100px, 100px);
        }
    </style>

单独控制每个方向的移动距离：

transform: translateX(移动距离);

transform: translateY(移动距离);

transform: translateZ(移动距离);

但是通过上述的方式，我们是看不到 Z 轴移动的距离的，所以就用到了下面的透视内容了。

4.1.2 透视

使用perspective属性设置透视近大远小

perspective: 1000px;

想看到哪个元素，就给该元素的父级元素添加perspective属性

取值一般为 800-1200px

4.2 空间旋转

css 复制代码

    <style>
        body {
            perspective: 1000px;
        }
        .box {
            margin: 400px auto;
            width: 300px;
            height: 300px;
            background-color: skyblue;
            border: 2px solid black;
            transition: all 1s;

        }

        .box:hover {
            /* transform: rotateZ(360deg);   旋转角度为Z轴旋转 相当于rotate(360deg); */
            /* transform: rotateX(60deg); */
            transform: rotateY(60deg);
        }
    </style>

4.3 立体呈现案例

【代码】

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立体呈现</title>
    <style>
        .box {
            position: relative;;
            margin: 100px auto;
            width: 200px;
            height: 200px;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

        .box:hover {
            transform: rotateY(360deg);   
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front"></div>
        <div class="back"></div>
    </div>
</body>
</html>

5 动画

5.1 基本使用

css 复制代码

    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: skyblue;  
        }
        /* 1.定义动画 */
        @keyframes play {
            /* 1. from to  形式 */
                /* from {
                    width: 300px;
                    height: 300px;
                }
                to {
                    width: 500px;
                    height: 500px;
                } */

            /* 2. 百分比形式 */
            0% {
                width: 300px;
                height: 300px;
            }
            50% {
                width: 400px;
                height: 400px;
            }
            100% {
                width: 500px;
                height: 500px;
            }
            }

        .box:hover {
            /* 使用动画 */
            animation: play 1s;
        }
    </style>

5.2 动画的其它相关属性

5.2.1 linear 设置匀速

css 复制代码

animation: play 1s linear;

5.2.2 分布动画

steps(3) 分为3个动画帧 ...

css 复制代码

animation: play 1s steps(3);

5.2.3 延迟时间

在动画中：第一个时间表示动画时长，第二个时间表示延迟时间

css 复制代码

animation: play 1s 1s;

5.2.4 重复次数

css 复制代码

animation: play 1s 3;  /* 重复3次 */

css 复制代码

animation: play 1s infinite;    /*重复无穷次 */

5.2.5 动画方向 alternate

先执行再执行,有反向效果

css 复制代码

animation: play 1s infinite alternate;

5.2.6 执行完毕的状态

css 复制代码

animation: play 1s backwards;  /* 默认值 backwards*/

css 复制代码

animation: play 1s forwards;  /* 动画执行完毕的状态 */