css动画实现秒针

最新推荐文章于 2022-08-20 10:56:49 发布

良纵

最新推荐文章于 2022-08-20 10:56:49 发布

阅读量694

点赞数 1

本文链接：https://blog.csdn.net/qq_33807889/article/details/105229080

版权

<!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>
        .item {
            background: black;
            border-radius: 50%;
            margin: 30px auto;
            width: 20px;
            height: 200px;
            animation-name: rotateCircle;
            animation-duration: 6s;
            /* 匀速 */
            animation-timing-function: linear;
            /* 无限播放 */
            animation-iteration-count: infinite;
            /* 旋转基点设置为底部居中 */
            transform-origin: center bottom;

        }

        /* 动画暂停 */
        .pause {
            animation-play-state: paused;
        }

        /* 动画执行 */
        .run {
            animation-play-state: running;
        }

        @keyframes rotateCircle {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="item pause"></div>
    <button id="run">开始</button>
    <button id="pause">暂停</button>
    <script>
        // 控制动画开始结束
        const item = document.querySelector('.item');

        document.querySelector('#pause').addEventListener('click', function () {
            let classlist = ['item'];
            classlist.push('pause');
            item.className = classlist.join(" ");
        })

        document.querySelector('#run').addEventListener('click', function () {
            let classlist = ['item'];
            classlist.push('run');
            item.className = classlist.join(" ");
        })
    </script>
</body>

</html>

良纵

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css动画实现秒针

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...
复制链接

扫一扫