其他分享
首页 > 其他分享> > 2021-01-11

2021-01-11

作者：互联网

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转换之前,我们先了解一个概念----三维坐标系

在这里插入图片描述

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

3D转换的基本语法:

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

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

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

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

语法:

3D呈现 transfrom-style:

透视perspective:

在这里插入图片描述
translateZ与perspective的区别:

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

3D呈现transform-style

案例:

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>

标签：11,动画,01,transform,rotateY,animation,translate3d,2021,200px
来源： https://blog.csdn.net/Layfolk_XK/article/details/112461433