HTML与CSS学习Day02（平面、空间操作）

文章目录

三、平面转换（2D转换）
- 3.1 平移 translate
- - 3.1.1 应用1 -- 居中
  - - （1）方式一
    - （2）方式二
  - 3.1.2 应用2 -- 双开门效果
  - - （1）侧滑门 translateX
    - （2）推开的大门（结合后面的 rotateY）
- 3.2 旋转 rotate
- - 3.2.1 转换原点 transform-origin
  - 3.2.2 多重转换技巧：先平移再旋转
- 3.3 其他
- - 3.3.1 缩放 transform: scale
  - - 语法
  - 3.3.2 倾斜 skew
  - 3.3.3 渐变
  - - （1）线性渐变（linear gradient）语法：
    - （2）径向渐变（radial gradient）语法：
    - 其中：
四、空间转换
- 4.1 透视
- - 语法
  - 示例
  - 解释
  - 注意事项
- 4.2 旋转 rotateZ
- - 4.2.1 应用立体呈现 - transform-style
  - - 过程
  - 代码解释
  - 完整示例
- 4.3 CSS3D -- transform: scale3d
- - 基本语法
  - 示例
  - 透视效果
  - 注意事项
- 4.4 animation 动画效果
- - 4.4.1基本语法
  - - 示例1
    - 示例2
    - 解释
  - 4.4.2 实现步骤
  - 4.4.3 和过渡的区别
  - - 1. 功能和用法
    - 2. 控制粒度
    - 3. 动画的灵活性
    - 4. 性能和使用场景
    - 5. 兼容性
    - 总结
  - 4.4.4 应用：走马灯效果
  - 4.4.5 逐帧动画
  - 4.4.6 多属性动画

三、平面转换（2D转换）

2D转换属性通常与过渡（transition）或动画（animation）效果结合使用，以实现平滑的元素状态变化。通过定义转换属性的初始状态和最终状态，结合过渡或动画效果，可以创建出更加流畅和吸引人的页面交互效果。

3.1 平移 translate

translate属性是CSS中用于元素移动的转换函数之一。
（1）translate接受一个或两个参数，分别表示水平和垂直方向的移动距离。
（2）取值：像素单位、百分比、且正负均可

如果只提供一个参数，元素将按照提供的长度值在水平方向移动。
如果提供两个参数，第一个参数表示水平移动（只写一个就是沿着X轴移动），第二个参数表示垂直移动。

例如，transform: translate(50px, 100px);会将元素向右移动50像素，向下移动100像素。这种移动是相对于元素自身的初始位置进行的，而不是相对于文档流中的位置。这使得元素的布局不会受到影响，只是视觉上发生了移动。

 .element1 {
    transform: translate(50px, 100px);
}
 
.element2 {
    transform: translateX(30px) translateY(-20px);
}复制

3.1.1 应用1 – 居中

（1）方式一

这种方法需要根据元素的宽度和高度来计算负的margin值，以确保元素在父元素中居中显示。

 绝对定位，相当于我们把坐标系从屏幕左上角移至到中心点在画出这个盒子大小复制

 <style>
    div{
        position: absolute;
        left: 50%;
        top: 50%;
        background-color: greenyellow;
        /* margin 变偏移 */
        margin-left: -100px;
        margin-top: -50px;
        width: 200px;
        height: 100px;
    	}
</style>复制

在方式一中，为了将元素水平居中，我们使用了margin-left: -100px;和margin-top: -50px;这样的负值。这是因为我们将元素的左上角定位到父元素的中心点，然后通过负的margin-left和margin-top值，将元素的中心点移动到父元素的中心点，从而实现了水平和垂直居中的效果。

具体来说，假设元素的宽度为200px，高度为100px。当我们设置margin-left: -100px;时，实际上是将元素的中心点向左移动了100px，使得元素的中心点与父元素的中心点对齐，从而实现了水平居中。同理，margin-top: -50px;是将元素的中心点向上移动了50px，实现了垂直居中。

（2）方式二

这种方法不需要像方式一那样计算具体的负margin值，只需简单地使用transform: translate(-50%, -50%);就可以实现元素的居中显示，更加方便和易于维护。

 <style>
    .box {
        position: absolute;
        left: 50%;
        top: 50%;
        background-color: deepskyblue;
        border: 1px solid #000;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 50px;
    }
</style>复制

在方式二中，我们使用了transform: translate(-50%, -50%);来实现元素的居中显示。这种方法相对于方式一更加简洁和灵活。

具体原理是，我们首先使用position: absolute;将元素定位到父元素的50%位置，然后通过transform: translate(-50%, -50%);来将元素自身的中心点移动到父元素的中心点，从而实现了居中显示的效果。

通过transform: translate(-50%, -50%);，我们告诉浏览器将元素自身的中心点向左移动50%的宽度，向上移动50%的高度，这样就能使元素在水平和垂直方向上都居中显示。

3.1.2 应用2 – 双开门效果

HTML

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双开门效果</title>
</head>
<body>
    <div class="doors">
        <div class="door left"></div>
        <div class="door right"></div>
    </div>
</body>
</html>
 复制

（1）侧滑门 translateX

 <style>
    *{
        margin: 0;
        padding: 0;
    }
 
    .doors{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        width: 800px;
        height: 500px;
        background-color: dodgerblue;
    }
 
    .door{
        width: 50%;
        height: 500px;
        background-color: greenyellow;
        transition: all 1s;
    }
	/*设置右侧背景初始化位置*/
    .doors .right{
        background-position: right 0;
     }
    .doors:hover .left{
        transform: translate(-100%);
    }
 
    .doors:hover .right{
        transform: translate(100%);
    }
</style>
 复制

（2）推开的大门（结合后面的 rotateY）

CSS

 <style>
    * {
        margin: 0;
        padding: 0;
    }
 
    .doors {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        width: 800px;
        height: 500px;
        background-color: dodgerblue;
        /*overflow: hidden;*/
        perspective: 1000px; /* 添加透视效果 */
    }
 
    .door {
        width: 50%;
        height: 100%;
        background-color: greenyellow;
        transition: transform 1s;
        transform-origin: center; /* 设置旋转中心 */
    }
 
    .doors .left {
        transform-origin: left ; /* 左门旋转中心 */
    }
 
    .doors .right {
        transform-origin: right; /* 右门旋转中心 */
    }
 
    .doors:hover .left {
        transform: rotateY(-180deg); /* 左门旋转 */
    }
 
    .doors:hover .right {
        transform: rotateY(180deg); /* 右门旋转 */
    }
</style>复制

3.2 旋转 rotate

CSS 的 rotate() 函数定义了一种将元素围绕一个定点（由transform-origin属性指定）旋转而不变形的转换。
请添加图片描述
方向：正顺负逆时针

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转</title>
    transform: rotate(360deg);
    <style>
        img {
            width: 200px;
            transition: all 2s;
        }
 
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="images/rotate.png" alt="">
</body>
</html>复制

3.2.1 转换原点 transform-origin

CSS中的transform-origin属性用于设置元素变换的原点位置。通过指定transform-origin，您可以控制元素围绕其原点进行旋转、缩放或倾斜。这个属性接受不同类型的值，如像素、百分比或关键字，来定义原点的位置。

  默认情况下，转换原点是盒子中心点
 属性
   transform-origin: 水平原点位置 垂直原点位置;
 取值
   方位名词（left、 top、 right、 bottom,center)
   像素单位数值
   百分比复制

请添加图片描述

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换原点</title>
    <style>
        img {
            width: 200px;
            border: 1px solid #00a4ff;
            transition: all 2s;
            /*transform-origin: 100% 100%;*/
            transform-origin: right bottom;
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="images/rotate.png" alt="">
</body>
</html>复制

3.2.2 多重转换技巧：先平移再旋转

在CSS中，转换函数的顺序很重要，因为它们按照从右到左的顺序应用于元素。这意味着先写的转换函数会最后应用，而最后写的会最先应用。所以，如果你想先平移再旋转，应该按照这个顺序来写：

 .element {
    transform: translateX(50px) rotate(45deg);
}复制

这将先使元素向右平移50像素，然后再顺时针旋转45度。

3.3 其他

3.3.1 缩放 transform: scale

CSS缩放是指通过改变元素的尺寸大小来调整其显示大小。可以使用transform: scale()属性来实现缩放效果。这个属性接受一个值，表示元素在水平和垂直方向上的缩放比例。例如，transform: scale(0.5)会将元素缩小到原始大小的一半。

语法

单参数：transform: scale(X);
- X表示元素在水平和垂直方向上的等比例缩放比例。
双参数：transform: scale(X, Y);
- X表示元素在水平方向上的缩放比例，Y表示元素在垂直方向上的缩放比例。

例如：

单参数：transform: scale(0.5); 会将元素等比例缩小到原始大小的一半。
双参数：transform: scale(0.5, 0.8); 会将元素在水平方向上缩小到原始大小的一半，在垂直方向上缩小到原始大小的0.8倍。

3.3.2 倾斜 skew

倾斜（skew）是一种CSS变换，可以沿着X轴和Y轴倾斜元素。倾斜可以通过transform: skew()属性来实现。

倾斜的语法如下：

 .element {
    transform: skew(Xdeg, Ydeg);
}复制

Xdeg：表示元素沿着X轴的倾斜角度。
Ydeg：表示元素沿着Y轴的倾斜角度，可选参数。如果省略，则默认为0。

例如，transform: skew(30deg, 0)会使元素沿着X轴倾斜30度。

3.3.3 渐变

 一般用于设置盒子背景复制

渐变（gradient）是一种CSS属性，用于创建平滑的颜色过渡效果。在CSS中，可以使用linear-gradient()或radial-gradient()函数来实现线性渐变和径向渐变。

（1）线性渐变（linear gradient）语法：

 .element {
    background: linear-gradient(direction, color-stop1, color-stop2, ...);
}复制

     background: linear-gradient(
    渐变方向,
    颜色·1 终点位置,
    颜色·2 终点位置,
    ....);
 
    取值
    渐变方向:
        可选to 方位名词 默认为to bottom
        角度度数
    终点位置：可选
        百分比复制

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title><!--
    <style>
        div {
            width: 100px;
            height: 100px;
            background: linear-gradient(to right, red, yellow, green);
        }
 
        .second {
            width: 100px;
            height: 100px;
            background: linear-gradient(red, yellow, green);
        }
    </style>
</head>
<body>
    <div></div>
 
    <div class="second"></div>
</body>
</html>
 复制

（2）径向渐变（radial gradient）语法：

 .element {
    background: radial-gradient(shape size at position, start-color, ..., last-color);
}复制

     作用：给按钮添加高光效果
    background: radial-gradient
    (半径 at 圆心位置 ,
    颜色1 终点位置,
    颜色2,
    颜色3,
    ...
    );
    取值半径可以是2条,则为椭圆
    圆心位置取值：像素单位数值/百分比/方位名词复制

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            border-radius: 50%;
 
            /*background: radial-gradient(circle, red, yellow, green, blue, purple);*/
            /*background: radial-gradient(50px at center center, red, yellow, green, blue, purple);*/
            background: radial-gradient(50px 20px at center center, red, yellow, green, blue, purple);
            background: radial-gradient(50px at 20px 30px, red, yellow, green, blue, purple);
 
        }
 
        .second {
            width: 100px;
            height: 40px;
            border-radius: 50%;
            background-color: green;
            border: 0;
            color: white;
            background-image: radial-gradient(
                    30px at 30px 20px,
                    rgba(255, 255, 255, 0.5),
                    transparent
            );
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="second"></div>
</body>
</html>复制

其中：

direction：线性渐变的方向，如to right, to bottom,等。
color-stop：颜色和位置的组合，可以是颜色值或颜色值加位置。
shape：径向渐变的形状，如circle或ellipse。
size：径向渐变的大小，如closest-side, farthest-side,等。
position：径向渐变的位置，如center, top left,等。
start-color和last-color：渐变的起始颜色和结束颜色。

例如：

线性渐变：background: linear-gradient(to right, red, blue);
径向渐变：background: radial-gradient(circle, red, blue);

四、空间转换

空间转换是指在三维空间中对元素进行的变换操作，涉及到X轴、Y轴以及Z轴。3D转换不仅影响元素在平面内的位置，还可以对其深度进行操作，从而创建立体效果。
在这里插入图片描述

4.1 透视

在CSS中，perspective属性用于为元素设置透视效果，影响元素在3D空间中的远近和视觉呈现方式。这个属性通常用于父元素上，以影响其子元素的3D转换效果。

透视效果:近大远小、近实远虚
的视觉效果

语法

 perspective: <length>;复制

<length>：指定透视点到视图平面的距离。较大的值会使元素看起来离观察者更远，产生更明显的透视效果。

示例

 .parent {
    perspective: 1000px; /* 设置透视点到视图平面的距离为1000像素 */
}
 
.child {
    transform: rotateY(45deg); /* 对子元素应用Y轴旋转 */
}复制

解释

在上述示例中，.parent类的元素设置了perspective: 1000px;，这意味着透视点到视图平面的距离为1000像素。
.child类的元素应用了transform: rotateY(45deg);，这会使子元素绕其Y轴顺时针旋转45度。
由于.child元素位于.parent元素内部，并且.parent具有透视效果，因此.child元素的旋转看起来会有透视感，使其在3D空间中呈现出更立体的效果。

注意事项

perspective属性只在应用了3D转换时才会生效。如果没有应用任何3D转换，设置perspective是不会产生任何视觉效果的。
perspective属性值可以是任何大于0的长度值。较大的值会产生更强烈的透视效果。

通过合理使用perspective属性，可以增强Web页面中的3D效果，提升用户体验和交互感。

4.2 旋转 rotateZ

增加了rotateZ

 左手法则 - 根据旋转方向确定取值正负
    左手握住旋转轴,拇指指向正值方向,其他四个手指弯曲方向为旋转正值方向
    一般用不上：
    拓展rotate3d(x, y, z,角度度数)：用来设置自定义旋转轴的位置及旋转的角度
    x, y,z 取值为0-1之间的数字
 复制

 <style>
    .box {
        width: 300px;
        margin: 100px auto;
    }
 
    img {
        width: 300px;
        transition: all 2s;
    }
 
    .box img:hover {
 
        transform: rotateZ(360deg);
        /*transform: rotate3d(0, 1, 0, 360deg);*/
    }
</style>复制

请添加图片描述

4.2.1 应用立体呈现 - transform-style

 作用:设置元素的子元素是位于3D空间中还是平面中复制

transform-style 是 CSS 中一个用于指定元素的子元素在 3D 空间中的呈现方式的属性。

flat：这是默认值。它表示子元素在 2D 平面上进行变换，不会表现出 3D 的深度效果。
preserve-3d：如果设置为这个值，子元素将保留其在 3D 空间中的位置，并且整个元素的 3D 变换效果会被传递给子元素，从而产生立体的效果。

过程

（1）为容器设置 transform-style: preserve-3d 以保留子元素的 3D 变换效果

（2）子元素代表立体图形的一个面的定义并调整位置。使用 translateZ 和 rotate 属性将它们定位到适当的位置。

这个示例通过 CSS 的 transform-style 属性和 3D 变换，创建了一个简单的立体效果，其中包含一个带有前后两面的立方体。当你将鼠标悬停在立方体上时，它会旋转 90 度，展示不同的面。以下是这个代码的解释和进一步的优化建议。

代码解释

 - `.cube`: 定义了立方体的基本大小和样式，并设置 `transform-style: preserve-3d;`，使其子元素能够在 3D 空间中展示。`transition: all 2s;` 使得立方体的旋转动画平滑。
- `.cube:hover`: 在鼠标悬停时，立方体会旋转 90 度，展示其侧面。
- `.cube div`: 每个子 `div` 的大小与父容器相同，并使用 `position: absolute;` 使其在父容器中定位。
- `.front` 和 `.back`: 前后两面分别使用 `translateZ` 将其在 Z 轴上移动，以产生立体效果。前面被移动 100px，后面被移动 -100px，使其位于相对位置。复制

完整示例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D Cube Example</title>
    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transform-style: preserve-3d;
            transition: transform 2s;
        }
 
        .cube:hover {
            transform: rotateY(90deg);
        }
 
        .cube div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
 
        .front {
            background-color: orange;
            transform: translateZ(100px);
        }
 
        .back {
            background-color: greenyellow;
            transform: translateZ(-100px);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front"></div>
        <div class="back"></div>
    </div>
</body>
</html>复制

4.3 CSS3D – transform: scale3d

CSS3D 缩放是一种利用 CSS3 中的 transform 属性来实现 3D 效果的缩放技术。它可以在三维空间中改变元素的大小，同时保持透视和深度感。

基本语法

 element {
  transform: scale3d(sx, sy, sz);
}复制

sx：沿 X 轴的缩放比例。
sy：沿 Y 轴的缩放比例。
sz：沿 Z 轴的缩放比例。

示例

 <div class="box">3D Scale</div>复制

 .box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transform: scale3d(1, 1, 1); /* 初始大小 */
  transition: transform 0.5s;
}
 
.box:hover {
  transform: scale3d(1.5, 1.5, 1.5); /* 放大至1.5倍 */
}复制

透视效果

为了增加透视效果，可以在父元素中添加 perspective 属性。

 .container {
  perspective: 800px;
}
 
.box {
  transform: scale3d(1, 1, 1) rotateY(30deg);
}复制

注意事项

scale3d 只会影响元素的大小，但不会改变其位置。
当 sz 为 1 时，元素在 Z 轴上的缩放效果与 2D 缩放效果相同。
使用 transform 属性时，可能需要加上浏览器前缀以兼容旧版本浏览器。

4.4 animation 动画效果

CSS 的 animation 属性用于为 HTML 元素设置动画效果。它可以让元素在指定的时间内，按照一定的方式进行逐帧动画。

CSS 的 animation 属性用于为 HTML 元素设置动画效果。它可以让元素在指定的时间内，按照一定的方式进行逐帧动画。以下是 animation 属性的基本用法和相关属性的介绍：

4.4.1基本语法

 selector {
  animation: animation-name duration timing-function delay iteration-count direction fill-mode;
}复制

animation-name: 定义要应用的关键帧动画的名称。
duration: 动画完成一次所需的时间（例如 2s 表示 2 秒）。
timing-function: 定义动画的速度曲线（如 linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier()）。
delay: 动画开始前的延迟时间（如 1s 表示延迟 1 秒后开始）。
iteration-count: 定义动画播放的次数（如 infinite 表示无限循环）。
direction: 定义动画的方向（如 normal, reverse, alternate, alternate-reverse）。
fill-mode: 定义动画在播放完成后的状态（如 none, forwards, backwards, both）。

示例1

演示了一个元素从左向右移动的效果：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation Example</title>
    <style>
        /* 定义关键帧动画 */
        @keyframes slide {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(300px);
            }
        }
 
        /* 应用动画 */
        .animated-box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: slide 2s ease-in-out infinite alternate;
        }
    </style>
</head>
<body>
    <div class="animated-box"></div>
</body>
</html>复制

示例2

颜色变换

 <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: mymove 5s 1s infinite alternate;
        }
 
        @keyframes mymove {
            0% {
                background-color: red;
                /*left: 0px;*/
                /*top: 0px;*/
                /*transform: translate(0);*/
            }
            25% {
                background-color: yellow;
                /*                left: 200px;
                                top: 0px;*/
                /*transform: translate(600px);*/
 
            }
        }
    </style>复制

解释

@keyframes: 定义了动画的关键帧。在这个例子中，动画的起点是元素在 0 位置，终点是元素向右移动 300px。
.animated-box: 为元素设置了动画，持续时间为 2s，使用 ease-in-out 曲线，循环播放，且方向交替变化。

4.4.2 实现步骤

         定义动画1
        @keyframes 动画名称{
        from {}
        to {}
        }
 
        定义动画2
        @keyframes 动画名称{
        0% {}
        10% {}
        100% {}
        }
  
  使用动画animation: 动画名称 动画花费时长;复制

       animation： 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
    提示
    动画名称和动画时长必须赋值
    取值不分先后顺序
    如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
 复制

 /* linear：匀速 */animation: change 1s linear;
/* steps：分步动画，工作中，配合精灵图实现精灵动画animation: change 1s steps(3);
复制

4.4.3 和过渡的区别

CSS中的animation（动画）和transition（过渡）都是用于在网页元素上创建动态效果的工具，但它们在使用场景和功能上有一些显著的区别。以下是两者的主要区别：

1. 功能和用法

animation（动画）：
- 关键帧动画：animation使用关键帧（@keyframes）定义动画，可以控制元素在多个状态下的变化，允许创建复杂的动画序列。
- 持续时间：动画可以循环播放，设置播放次数，甚至可以无限循环。
- 自动开始：animation可以在页面加载时自动开始，无需触发特定的用户交互。
- 控制更多：它提供了更多的控制选项，例如延迟、播放方向、速度曲线等，可以实现复杂的效果。
```
 @keyframes example {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(0); }
}
 
.animated-box {
    animation: example 3s infinite;
}复制
```
transition（过渡）：
- 单一变化：transition用于在元素的某个属性（如颜色、位置、透明度等）发生变化时，创建平滑的过渡效果。
- 需要触发：过渡效果通常需要用户交互（如鼠标悬停、点击）触发，它依赖于元素属性的变化（例如hover状态）。
- 简单易用：适用于简单的动画效果，比如从一种状态平滑过渡到另一种状态。
```
 .box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: background-color 2s ease;
}
 
.box:hover {
    background-color: blue;
}复制
```

2. 控制粒度

animation：提供了对动画的精细控制，允许定义多个关键帧，每个关键帧之间可以有不同的属性变化和时间点。

Example: 动画可以从左到右再到原位，同时改变颜色。

 @keyframes complex-animation {
    0% { transform: translateX(0); background-color: red; }
    50% { transform: translateX(200px); background-color: green; }
    100% { transform: translateX(0); background-color: blue; }
}
 
.complex-box {
    animation: complex-animation 5s infinite;
}复制

transition：通常用于更简单的效果，例如颜色或尺寸的渐变变化。它只处理两个状态之间的过渡。
- Example: 鼠标悬停时，颜色从红色平滑变为蓝色。
```
 .simple-box {
    background-color: red;
    transition: background-color 0.5s ease;
}
 
.simple-box:hover {
    background-color: blue;
}复制
```

3. 动画的灵活性

animation：更适合复杂、多步骤的动画序列，能实现从一帧到另一帧的不同变化。
transition：更适合简单的两种状态之间的平滑过渡，只能在起始状态和结束状态之间变化。

4. 性能和使用场景

animation：适用于需要控制多个步骤的动画，特别是那些需要循环播放、自动启动的效果，例如加载动画、循环的视觉效果等。
transition：适合简单交互场景，比如按钮点击、鼠标悬停等状态变化时的过渡效果。

5. 兼容性

**animation和transition**在现代浏览器中都得到了广泛支持，但animation由于其复杂性，在早期浏览器中的支持可能较弱一些。

总结

使用animation来创建复杂、多步骤的动画效果，尤其是当需要关键帧控制或需要动画自动启动时。
使用transition来处理简单的状态过渡，通常在用户交互时触发，并只在两个状态之间变化。

4.4.4 应用：走马灯效果

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
 
        li {
            list-style: none;
        }
 
        img {
            width: 200px;
        }
 
        .box {
            width: 600px;
            height: 112px;
            border: 5px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
 
        .box ul {
            display: flex;
            animation: move 8s infinite linear;
        }
 
        .box ul:hover {
            animation-play-state: paused;
        }
 
        /*动画定义*/
        @keyframes move {
            0% {
                transform: translate(0);
            }
            100% {
                transform: translate(-1400px);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="./images/1.jpg" alt=""/></li>
            <li><img src="./images/2.jpg" alt=""/></li>
            <li><img src="./images/3.jpg" alt=""/></li>
            <li><img src="./images/4.jpg" alt=""/></li>
            <li><img src="./images/5.jpg" alt=""/></li>
            <li><img src="./images/6.jpg" alt=""/></li>
            <li><img src="./images/7.jpg" alt=""/></li>
 
            <li><img src="./images/1.jpg" alt=""/></li>
            <li><img src="./images/2.jpg" alt=""/></li>
            <li><img src="./images/3.jpg" alt=""/></li>
        </ul>
    </div>
</body>
</html>
 复制

4.4.5 逐帧动画

精灵动画制作步骤
1,准备显示区域
盒子尺寸与一张精灵小图尺寸相同
2. 定义动画
移动背景图(移动距离=精灵图宽度)
3.使用动画
steps(N), N 与精灵小图个数相同

animation-timing-function速度曲线steps(数字)：逐帧动画

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    animation-timing-function速度曲线steps(数字)：逐帧动画-->
 
 
 
    <style>
        div {
            width: 140px;
            height: 140px;
            border: 1px solid #000;
            background-image: url(./image/bg.png);
            animation: run 1s steps(12) infinite;
        }
 
        @keyframes run {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -1680px 0;
            }
        }
 
 
    </style>
</head>
<body>
    <div></div>
 
</body>
</html>复制

在这里插入图片描述

4.4.6 多属性动画

如果需要定义多个动画，可以用逗号分隔不同的动画名称及其参数：

 selector {
  animation: slide 2s ease-in-out, fade 1s linear;
}复制

在这里插入图片描述

	.element1 {
	transform: translate(50px, 100px);
	}

	.element2 {
	transform: translateX(30px) translateY(-20px);
	}

	<style>
	div{
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: greenyellow;
	/* margin 变偏移 */
	margin-left: -100px;
	margin-top: -50px;
	width: 200px;
	height: 100px;
	}
	</style>

	<style>
	.box {
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: deepskyblue;
	border: 1px solid #000;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 50px;
	}
	</style>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>双开门效果</title>
	</head>
	<body>
	<div class="doors">
	<div class="door left"></div>
	<div class="door right"></div>
	</div>
	</body>
	</html>

	<style>
	*{
	margin: 0;
	padding: 0;
	}

	.doors{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	width: 800px;
	height: 500px;
	background-color: dodgerblue;
	}

	.door{
	width: 50%;
	height: 500px;
	background-color: greenyellow;
	transition: all 1s;
	}
	/设置右侧背景初始化位置/
	.doors .right{
	background-position: right 0;
	}
	.doors:hover .left{
	transform: translate(-100%);
	}

	.doors:hover .right{
	transform: translate(100%);
	}
	</style>

	默认情况下，转换原点是盒子中心点
	属性
	transform-origin: 水平原点位置垂直原点位置;
	取值
	方位名词（left、 top、 right、 bottom,center)
	像素单位数值
	百分比

	.element {
	background: linear-gradient(direction, color-stop1, color-stop2, ...);
	}

	background: linear-gradient(
	渐变方向,
	颜色·1 终点位置,
	颜色·2 终点位置,
	....);

	取值
	渐变方向:
	可选to 方位名词默认为to bottom
	角度度数
	终点位置：可选
	百分比

	.element {
	background: radial-gradient(shape size at position, start-color, ..., last-color);
	}

	作用：给按钮添加高光效果
	background: radial-gradient
	(半径 at 圆心位置 ,
	颜色1 终点位置,
	颜色2,
	颜色3,
	...
	);
	取值半径可以是2条,则为椭圆
	圆心位置取值：像素单位数值/百分比/方位名词

	.simple-box {
	background-color: red;
	transition: background-color 0.5s ease;
	}

	.simple-box:hover {
	background-color: blue;
	}

	.parent {
	perspective: 1000px; /* 设置透视点到视图平面的距离为1000像素 */
	}

	.child {
	transform: rotateY(45deg); /* 对子元素应用Y轴旋转 */
	}

	左手法则 - 根据旋转方向确定取值正负
	左手握住旋转轴,拇指指向正值方向,其他四个手指弯曲方向为旋转正值方向

	一般用不上：
	拓展rotate3d(x, y, z,角度度数)：用来设置自定义旋转轴的位置及旋转的角度
	x, y,z 取值为0-1之间的数字

	- `.cube`: 定义了立方体的基本大小和样式，并设置 `transform-style: preserve-3d;`，使其子元素能够在 3D 空间中展示。`transition: all 2s;` 使得立方体的旋转动画平滑。
	- `.cube:hover`: 在鼠标悬停时，立方体会旋转 90 度，展示其侧面。
	- `.cube div`: 每个子 `div` 的大小与父容器相同，并使用 `position: absolute;` 使其在父容器中定位。
	- `.front` 和 `.back`: 前后两面分别使用 `translateZ` 将其在 Z 轴上移动，以产生立体效果。前面被移动 100px，后面被移动 -100px，使其位于相对位置。

	.box {
	width: 100px;
	height: 100px;
	background-color: lightblue;
	transform: scale3d(1, 1, 1); /* 初始大小 */
	transition: transform 0.5s;
	}

	.box:hover {
	transform: scale3d(1.5, 1.5, 1.5); /* 放大至1.5倍 */
	}

	.container {
	perspective: 800px;
	}

	.box {
	transform: scale3d(1, 1, 1) rotateY(30deg);
	}

	selector {
	animation: animation-name duration timing-function delay iteration-count direction fill-mode;
	}

	<style>
	div {
	width: 100px;
	height: 100px;
	background-color: red;
	animation: mymove 5s 1s infinite alternate;
	}

	@keyframes mymove {
	0% {
	background-color: red;
	/left: 0px;/
	/top: 0px;/
	/transform: translate(0);/
	}
	25% {
	background-color: yellow;
	/* left: 200px;
	top: 0px;*/
	/transform: translate(600px);/

	}
	}
	</style>

	定义动画1
	@keyframes 动画名称{
	from {}
	to {}
	}

	定义动画2
	@keyframes 动画名称{
	0% {}
	10% {}
	100% {}
	}

	使用动画animation: 动画名称动画花费时长;

	animation：动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态；
	提示
	动画名称和动画时长必须赋值
	取值不分先后顺序
	如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

	/* linear：匀速 */animation: change 1s linear;
	/* steps：分步动画，工作中，配合精灵图实现精灵动画animation: change 1s steps(3);

HTML与CSS学习Day02（平面、空间操作）

文章目录

三、平面转换（2D转换）

3.1 平移 translate

3.1.1 应用1 – 居中

（1）方式一

（2）方式二

3.1.2 应用2 – 双开门效果

（1）侧滑门 translateX

（2）推开的大门 （结合后面的 rotateY）

3.2 旋转 rotate

3.2.1 转换原点 transform-origin

3.2.2 多重转换技巧：先平移再旋转

3.3 其他

3.3.1 缩放 transform: scale

语法

3.3.2 倾斜 skew

3.3.3 渐变

（1）线性渐变（linear gradient）语法：

（2）径向渐变（radial gradient）语法：

其中：

四、空间转换

4.1 透视

语法

示例

解释

注意事项

4.2 旋转 rotateZ

4.2.1 应用 立体呈现 - transform-style

过程

代码解释

完整示例

4.3 CSS3D – transform: scale3d

基本语法

示例

透视效果

注意事项

4.4 animation 动画效果

4.4.1基本语法

示例1

示例2

解释

4.4.2 实现步骤

4.4.3 和过渡的区别

1. 功能和用法

2. 控制粒度

3. 动画的灵活性

4. 性能和使用场景

5. 兼容性

总结

4.4.4 应用：走马灯效果

4.4.5 逐帧动画

4.4.6 多属性动画

微信扫一扫：分享

（2）推开的大门（结合后面的 rotateY）

4.2.1 应用立体呈现 - transform-style

	@keyframes example {
	0% { transform: translateX(0); }
	50% { transform: translateX(100px); }
	100% { transform: translateX(0); }
	}

	.animated-box {
	animation: example 3s infinite;
	}

	@keyframes complex-animation {
	0% { transform: translateX(0); background-color: red; }
	50% { transform: translateX(200px); background-color: green; }
	100% { transform: translateX(0); background-color: blue; }
	}

	.complex-box {
	animation: complex-animation 5s infinite;
	}