css3系列之animation实现逐帧动画

上面这个两个简单的动画，是用 animation-timing-function: steps(); 这个属性实现的，具体如何实现，看下面：

这上面的图片，也就是我们的素材，

有些人，可能不是很理解关键帧容器，和 steps 之间的关系，没关系，看下面的图解

下面做钟表

用到的素材，如上所示。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        @keyframes secondRun {

            0% {

                transform: rotate(180deg);

            }

                                                /* 由于，我们只需要他 转一圈，所以，我们定义好一圈的角度即可 */

            100% {

                transform: rotate(540deg);

            }

        }

        .wra {

            width: 200px;

            height: 200px;

            position: relative;

            left: calc(50% - 100px);

            top: 100px;                             /*父元素的 基本布局*/

            background-image: url('./img/clock/clock.png');

            background-size: 100% 100%;

        }

        .hour {

            position: absolute;

            left: 95px;

            top: 95px;          /*把时针，定位到 中间点*/

            width: 10px;

            height: 45px;

            background-image: url('./img/clock/hour.png');

            background-size: 100% 100%;

            z-index: 2;

        }

        .minute {

            position: absolute;

            left: 95px;

            top: 95px;         /*把分针定位到中间点*/

            width: 10px;

            height: 66px;

            background-image: url('./img/clock/minute.png');

            background-size: 100% 100%;

            animation: secondRun 3600s infinite steps(60, end); /*steps 把总时长分割成 60  3600/60 =60 所以需要运动 60步* 60s走一次   */

            transform-origin: center 5px;   /*要旋转，就要有旋转的中心点， 设置旋转的中心点。*/

            transform: rotate(180deg);  /*因为，默认的指针是指向 6   我们需要让他指向 12  所需要旋转 180度 */

            z-index: 1;

        }

        .second {

            position: absolute;

            left: 98px;

            top: 77px;         /*把秒针定位到中间点*/

            width: 5px;

            height: 84px;

            background-image: url('./img/clock/second.png');

            background-size: 100% 100%;

            animation: secondRun 60s infinite steps(60, end);    /*steps 把总时长分割成 1 60/60 = 1 所以需要运动 60步， 1s 走一次*/

            transform-origin: center 23px;  /*要旋转，就要有旋转的中心点， 设置旋转的中心点。*/

            transform: rotate(180deg);  /*因为，默认的指针是指向 6   我们需要让他指向 12  所需要旋转 180度 */

            z-index: 3;

        }

    </style>

</head>

<body>

    <div class="wra">

        <div class="hour"></div>

        <div class="minute"></div>

        <div class="second"></div>

    </div>

</body>

</html>

以下是素材，如何获取素材？右键检查，就能找到该图片的url 了。

巴特西

css3系列之animation实现逐帧动画

最新文章

热门文章