2021-01-11

2023-11-24 23:32:58

CSS3动画:

来学习动画之前我们先来介绍一下什么是动画,动画是CSS3中最具有颠覆性的特征之一,可以通过设置多个节点来精确的控制一个或一组动画,从而实现复杂的动画效果,之前我们学习的CSS中也有动画这一概念,不过之前的动画(是通过一定的时间段不断的处理元素的一些属性值,实现动态效果)是通过计时器来实现的

动画实现的两步走:

1.定义动画:

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

动画是使元素从一个样式逐渐变化为另一个样式的效果,可以改变任意多的样式任意多的次数

定义动画是的0%,50%,100%等就是我们之前说的通过多个节点来控制动画,0%控制的是动画的初始状态,而100%控制的是动画的结束状态,0%~100%之间控制的是动画的具体细节,这样的规则就是动画序列

我们还可以使用from~to来控制动画,效果等同于0%~100%

2.调用定义好的动画:

div {
	/* 调用动画 */
    animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间；
}

在 @keyframs 中规定某项 CSS 样式,就由创建当前样式逐渐改为新样式的动画效果

当然调用动画的时候还可以使用别的属性来使动画更为符合我们想要的效果

属性animation-timing-function规定动画的速度曲线，默认是ease

动画的简写方式:

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

简写属性里面不包含 animation-paly-state

暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用

要想动画走回来，而不是直接调回来：animation-direction: alternate

盒子动画结束后，停在结束位置：animation-fill-mode: forwards

CSS3 3D转换:

CSS3 允许您使用 3D 转换来对元素进行格式化

在学习3D转换之前,我们先了解一个概念----三维坐标系

x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值
y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值
z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值

3D转换和2D转换的差别就是多了一个Z轴

3D转换的基本语法:

3D位移----`translate3d(x, y, z)`:

语法:transform: translate3d(x, y, z)

transform: translateX(100px)：仅仅是在 x 轴上移动
transform: translateY(100px)：仅仅是在 y 轴上移动
transform: translateZ(100px)：仅仅是在 z 轴上移动
transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离

注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

3D旋转----`rotate3d(x, y, z)`:

3D旋转可以让元素在三维平面内沿x,y,z轴或者自定义轴进行旋转

语法:

transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, deg) – 沿着自定义轴旋转 deg 为角度
x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
- transform: rotate3d(1, 1, 0, 180deg) – 沿着对角线旋转 45deg
- transform: rotate3d(1, 0, 0, 180deg) – 沿着 x 轴旋转 45deg

`3D`呈现 `transfrom-style`:

透视perspective:

如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)
实际上模仿人类的视觉位置，可视为安排一只眼睛去看
透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素

translateZ与perspective的区别:

perspecitve 给父级进行设置，translateZ 给子元素进行设置不同的大小

3D呈现transform-style

控制子元素是否开启三维立体环境
transform-style: flat 代表子元素不开启 3D 立体空间，默认的
transform-style: preserve-3d 子元素开启立体空间
代码写给父级，但是影响的是子盒子

案例:

3D轮播图

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        img {
            width: 320px;
        }

        .pic1 {
            width: 320px;
            height: 216px;
            position: absolute;
            top: 200px;
            left: 400px;
            animation: move1;
            animation-duration: 6s;
            animation-iteration-count: infinite;
        }

        @keyframes move1 {
            25% {
                transform: translate3d(-420px, 0, -200px) rotateY(90deg);
            }

            50% {
                transform: translate3d(0px, 0, -400px) rotateY(0deg);
            }

            75% {
                transform: translate3d(420px, 0, -200px) rotateY(90deg);
            }

            100% {
                transform: translate3d(0px, 0, 100px) rotateY(0deg);
            }

        }

        .pic2 {
            width: 320px;
            height: 216px;
            position: absolute;
            top: 200px;
            left: 400px;
            transform: translate3d(420px, 0, -200px) rotateY(90deg);
            animation: move2;
            animation-duration: 6s;
            animation-iteration-count: infinite;
        }

        @keyframes move2 {
            25% {
                transform: translate3d(0px, 0, 100px) rotateY(0deg);
            }

            50% {
                transform: translate3d(-420px, 0, -200px) rotateY(90deg);
            }

            75% {
                transform: translate3d(0px, 0, -400px) rotateY(0deg);
            }

            100% {
                transform: translate3d(420px, 0, -200px) rotateY(90deg);
            }
        }

        .pic3 {
            width: 320px;
            height: 216px;
            position: absolute;
            top: 200px;
            left: 400px;
            transform: translate3d(0px, 0, -400px) rotateY(0deg);
            animation: move3;
            animation-duration: 6s;
            animation-iteration-count: infinite;
        }

        @keyframes move3 {
            25% {
                transform: translate3d(420px, 0, -200px) rotateY(90deg);
            }

            50% {
                transform: translate3d(0px, 0, 100px) rotateY(0deg);
            }

            75% {
                transform: translate3d(-420px, 0, -200px) rotateY(90deg);
            }

            100% {
                transform: translate3d(0px, 0, -400px) rotateY(0deg);
            }
        }

        .pic4 {
            width: 320px;
            height: 216px;
            position: absolute;
            top: 200px;
            left: 400px;
            transform: translate3d(-420px, 0, -200px) rotateY(90deg);
            animation: move4;
            animation-duration: 6s;
            animation-iteration-count: infinite;
        }

        @keyframes move4 {
            25% {
                transform: translate3d(0px, 0, -400px) rotateY(0deg);
            }

            50% {
                transform: translate3d(420px, 0, -200px) rotateY(90deg);
            }

            75% {
                transform: translate3d(0px, 0, 100px) rotateY(0deg);
            }

            100% {
                transform: translate3d(-420px, 0, -200px) rotateY(90deg);
            }
        }
    </style>
</head>

<body>
    <div class="pic1">
        <img src="./images/风景1.jpg">
    </div>
    <div class="pic2">
        <img src="./images/风景2.jpg">
    </div>
    <div class="pic3">
        <img src="./images/风景3.jpg">
    </div>
    <div class="pic4">
        <img src="./images/风景4.jpg">
    </div>
</body>

</html>

码农公寓

CSS3动画:

CSS3 3D转换:

3D转换的基本语法:

3D位移----translate3d(x, y, z):

3D旋转----rotate3d(x, y, z):

3D呈现 transfrom-style: