前端 / 每日进步9 分钟读完 (大约 1306 个字)

每日进步：动画的暂停与恢复

背景

一些简单的动画效果不一定需要JS来实现，CSS也可以进行实现，比如动画的暂停与恢复

动画的暂停与恢复

实现3D旋转轮播图

为了好除360deg，我就定义了6个div

<div class="cards-wrapper">
        <div class="card" style="--i:0;"></div>
        <div class="card" style="--i:1;"></div>
        <div class="card" style="--i:2;"></div>
        <div class="card" style="--i:3;"></div>
        <div class="card" style="--i:4;"></div>
        <div class="card" style="--i:5;"></div>
</div>

看上方代码就知道，我们这篇文章不仅仅将css3动画，css3一些新增的特性也会有所提到，比如自定义变量

–key: value

–key: value 中的–key 就类似对象中key, 冒号后面的就是我们对象中的value了，在实际开发中，这样写的话节不节约时间不知道，便于维护倒是真的。

设置3D旋转轮播图的背景颜色

:root {
    --colors-1: #f44336;
    --colors-2: #e91e63;
    --colors-3: #9c27b0;
    --colors-4: #673ab7;
    --colors-5: #3f51b5;
    --colors-6: #2196f3;
}

.card:nth-child(1) {
    background-color: var(--colors-1);
}

.card:nth-child(2) {
    background-color: var(--colors-2);
}

.card:nth-child(3) {
    background-color: var(--colors-3);
}

.card:nth-child(4) {
    background-color: var(--colors-4);
}

.card:nth-child(5) {
    background-color: var(--colors-5);
}

.card:nth-child(6) {
    background-color: var(--colors-6);
}

上面的:root是不能修改的, :root中的属性就是我们自己定义的css变量，注意的是，使用的时候:root可以省略，但是需要var(--colors-1)来获取变量中的值。

设置动画样式

.cards-wrapper {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate-wrapper 10s infinite linear alternate;
    /* infinite：指定动画重复次数为无限次。
       linear: 指定动画按照等速进行。
       alternate: 指定动画在每次循环结束时沿着相反方向运行。
    */
}

@keyframes rotate-wrapper {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(-360deg);
    }
}

.card {
    width: 100px;
    height: 150px;
    margin: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateY(calc(var(--i) * 60deg)) translateZ(200px);
    /* translate(-50%, -50%) 设置card按圆心旋转 */
}

这个时候界面显示的大概就是这个样子

这样和原图肯定是有差距的，原图在Z轴上是有偏移的，这就不得不提到perspective这个属性了。

perspective

perspective 是CSS 3D效果中应用的属性，它定义了观察者与 z=0 平面之间的距离，用于制作 3D 效果。该属性只适用于具有三维转换的元素，并且需要和 transform 属性搭配使用。perspective 可以接受一个长度值，代表视点距离 z=0 平面（也就是屏幕）的距离。这个值越小，元素的变化就会更明显，看起来更加陡峭；这个值越大，元素的变化就会更缓和、更渐进。它可以添加在任何包含 3D 转换元素的父级元素上，使整个元素组成符合透视规则的 3D 视觉。

刚开始我是直接在 .cards-wrapper上直接加上 perspective: 1000px;
效果图如下

乍一看没啥问题，Z轴确实有偏移了，但是越看越不对劲，轮播图按道理应该是越靠近用户这一方盒子应该是越大的，但这个有点不走寻常路。可怜我研究我一个钟硬是没有发现哪里有问题，放到chatGpt上也是答非所问。直到打开了w3c，才发现这个样式是需要写到父级元素上🤔。
.cards-wrapper父级元素是body

1
2
3

body{
        perspective: 1000px;
    }

这回3D旋转轮播图写好了。

animation-play-state

animation-play-state 是 CSS3 动画属性之一，用于控制动画的播放状态。它有两个可能的值：

1 2	running: 表示动画正在运行。 paused: 表示动画已暂停。

你可以使用这个属性来通过 JavaScript 代码或 CSS 动态地改变动画的播放状态，比如在某些用户交互事件（如鼠标悬停）时暂停动画，当这些事件结束后再继续播放动画。

现在给.cards-wrappercss 设置悬浮事件

1
2
3

.cards-wrapper:hover {
    animation-play-state: paused;
}

效果图

附上完整代码

<body>
    <div class="cards-wrapper">
        <div class="card" style="--i:0;"></div>
        <div class="card" style="--i:1;"></div>
        <div class="card" style="--i:2;"></div>
        <div class="card" style="--i:3;"></div>
        <div class="card" style="--i:4;"></div>
        <div class="card" style="--i:5;"></div>
    </div>
</body>

<style>
    /* 原生css定义颜色变量数组 */
    :root {
        --colors-1: #f44336;
        --colors-2: #e91e63;
        --colors-3: #9c27b0;
        --colors-4: #673ab7;
        --colors-5: #3f51b5;
        --colors-6: #2196f3;
    }

    .card:nth-child(1) {
        background-color: var(--colors-1);
    }

    .card:nth-child(2) {
        background-color: var(--colors-2);
    }

    .card:nth-child(3) {
        background-color: var(--colors-3);
    }

    .card:nth-child(4) {
        background-color: var(--colors-4);
    }

    .card:nth-child(5) {
        background-color: var(--colors-5);
    }

    .card:nth-child(6) {
        background-color: var(--colors-6);
    }

    body {
        perspective: 1000px;
    }

    .cards-wrapper {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        position: relative;
        transform-style: preserve-3d;
        animation: rotate-wrapper 10s infinite linear alternate;
    }

    @keyframes rotate-wrapper {
        0% {
            transform: rotateY(0deg);
        }

        100% {
            transform: rotateY(-360deg);
        }
    }

    .cards-wrapper:hover {
        animation-play-state: paused;
    }

    .card {
        width: 100px;
        height: 150px;
        margin: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotateY(calc(var(--i) * 60deg)) translateZ(200px);
    }
</style>

总结

css3新增--key: value方式定义变量，虽然不支持定义数组变量进行循环，但是在项目不能使用less,sass的时候还是有点用的。
perspective 作用于包含 3D 转换元素的父级元素上
animation-play-state 中的 running 和 paused 可以启动及暂停css动画效果

说实话，这篇文章没啥东西写的，写到一半的时候不想写下去了，幸好在 perspective 这个属性上卡了半天，才导致有写下去的想法，以后遇到的话就会注意了。

前端