【Web】0基础学Web—2d变换、透视、反转卡片、动画、步进动画、行走的僵尸案例

本文链接：https://blog.youkuaiyun.com/2201_75539182/article/details/144155886

0基础学Web—2d变换、透视、反转卡片、动画、步进动画、行走的僵尸案例

2d变换
- body代码
- 变换
透视
- body代码
- 透视
反转卡片
- body代码
- 反转卡片
动画
- body代码
- 动画
步进动画
行走的僵尸

2d变换

body代码

<body>
    <div class="wrapper">
        <div class="active">张三</div>
    </div>
</body>

变换

<style>
        .wrapper {
            width: 300px;
            height: 300px;
            border: 2px solid red;
        }

        .active {
            width: 150px;
            line-height: 200px;
            background-color: #9bd6ce;
            margin: 50px auto;
            text-align: center;
            /* 过渡效果 
				    ease:速度变慢 ，默认值
					linear:匀速
					ease-in:加速
					ease-out:减速
					ease-in-out:先加速后减速
            */
            /* 过渡:过渡属性 过渡时间 过渡效果 延迟时间 */
            transition: all 2s ease;
            /* 定义轴心 */
            transform-origin: right center;
        }

        .active:hover {
            /* 倾斜 skew 默认x方向*/
            /* transform:skewY(30deg); */
            background-color: #a61dd7;
            /* 缩放 scale   默认 宽高*/
            /* transform: scale(0.5); */
            /* 旋转 rotate 默认Z轴*/
            /* transform: rotate(120deg); */
            /* 位移：translate  默认x方向 */
            /* transform: translateY(-50px); */

            /* 多个设置 */
            transform: scale(0.5) translatex(100px)
        }
    </style>

透视

body代码

<body>
    <div class="wrapper">
        <div class="active">张三</div>
    </div>
</body>

透视

 <style>
        .wrapper {
            width: 300px;
            height: 300px;
            border: 2px solid red;
            /* 透视:必须加给父元素 */
            perspective: 1000px;
        }

        .active {
            width: 150px;
            line-height: 200px;
            background-color: #9bd6ce;
            margin: 50px auto;
            text-align: center;
            /* 过渡效果 
				    ease:速度变慢 ，默认值
					linear:匀速
					ease-in:加速
					ease-out:减速
					ease-in-out:先加速后减速
            */
            /* 过渡:过渡属性 过渡时间 过渡效果 延迟时间 */
            transition: all .5s ease;
            /* 背面不可见 */
            /* backface-visibility: hidden; */

        }

        .active:hover {
            transform: rotateX(60deg);
        }
    </style>

反转卡片

body代码

<body>
    <div class="warpper">
        <div class="main">
            <img class="img1" src="./imgs/1.jpg" alt="">
            <img class="img2" src="./imgs/2.jpg" alt="">
        </div>
    </div>
</body>

反转卡片

<style>
        .main {
            width: 291px;
            height: 251px;
            /* border: 2px solid red; */
            position: relative;
            /* 透视 */
            /* perspective: 1000px; */
        }

        .main:hover .img2 {
            transform: rotateX(180deg);
        }

        .img2 {
            /* 背面不可见 */
            backface-visibility: hidden;
        }

        .main:hover .img1 {
            transform: rotateX(0deg);
        }

        .main>img {
            position: absolute;
            left: 0;
            top: 0;
            /* 过渡 */
            transition: all 1s linear;
        }

        .main>img:first-of-type {
            transform: rotateX(-180deg);
        }
    </style>

动画

动画效果:与过渡一致:linear ease ease-in…
播放次数: 无限循环 infinite
animation-direction:
reverse:从最后一帧开始执行不允许反向
alternate:从第一帧开始执行并允许反向
alternate-reverse:从最后一帧开始执行允许反向
fill-mode:
backwards:延迟时间内，第一帧的样式生效
forwards: 动画停止后保持最后一帧的样式
both:两则兼顾

body代码

<body>
    <div></div>
</body>

动画

<style>
        /* 关键帧 @keyframes 动画名称 */
        @keyframes mybox {
           from{
                transform: translate(0);
                background-color: blue;
            }

            to {
                transform: translate(500px);
                background-color: rgb(22, 194, 142);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: #b46b6b;
            /* 动画:动画名称 动画时间 动画效果 延迟时间 播放次数 direction fill-mode */
            animation: mybox 1s .1s infinite;
            /* -webkit-animation: mybox 1s infinite; */
        }
    </style>

步进动画

body代码

<body>
    <div class="wrapper">
        <div class="inner">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

步进动画（1）

<style>
        .inner {
            display: flex;
            position: relative;
        }

        .inner>div {
            width: 200px;
            height: 200px;
            background-color: #c9b3bd;
            border-right: 2px solid red;
        }

        .inner::after {
            display: block;
            width: 200px;
            height: 200px;
            content: "";
            background-color: #95157e;
            position: absolute;
            left: 0;
            top: 0;
            animation: mybox 4s 0.5s;
        }

        @keyframes mybox {
            0% {
                transform: translate(0);
            }

            33% {
                transform: translate(202px);
            }

            66% {
                transform: translate(402px);
            }

            100% {
                transform: translate(602px);
            }
        }
    </style>

步进动画（2）

start 第一帧是第一步动画结束
end 第一帧是第一步动画开始,默认为end
steps的设置都是针对两个关键帧之间的，而非是整个keyframes

<style>
        .inner {
            display: flex;
            position: relative;
        }

        .inner>div {
            width: 200px;
            height: 200px;
            background-color: #c9b3bd;
            border-right: 2px solid red;
        }

        .inner::after {
            display: block;
            width: 200px;
            height: 200px;
            content: "";
            background-color: #95157e;
            position: absolute;
            left: 0;
            top: 0;
            animation: mybox 4s steps(4, end);
        }

        @keyframes mybox {
            0% {
                transform: translate(0);
            }

            100% {
                transform: translate(806px);
            }
        }
    </style>

行走的僵尸

body代码

<body>
    <div class="inner">
        <img src="./imgs/walkingdead.png" alt="">
    </div>
</body>

css

<style>
        .inner {
            width: 200px;
            height: 312px;
            border: 1px solid red;
            overflow: hidden;
            margin: 0 auto;
        }

        .inner>img {
            /* 分10步无限循环 */
            animation: mybox 1s steps(10) infinite;
        }

        @keyframes mybox {
            from {
                transform: translate(0);
            }

            to {
                transform: translate(-2000px);
            }
        }
    </style>

结果

在这里插入图片描述