css圆圈倒计时

CSS圆圈倒计时基础概念

CSS圆圈倒计时是一种使用CSS动画和JavaScript结合实现的视觉效果，通常用于显示剩余时间。它通过创建一个圆形的进度条，并随着时间的流逝逐渐填充这个圆形，从而直观地展示倒计时。

类型

纯CSS实现：通过CSS动画和伪元素实现倒计时效果。
JavaScript结合CSS：使用JavaScript计算剩余时间，并通过CSS动画展示。

应用场景

活动倒计时：在电商网站、社交媒体等平台上，用于显示活动开始或结束的剩余时间。
任务倒计时：在任务管理应用中，用于显示任务的截止时间。
游戏倒计时：在游戏应用中，用于显示关卡或挑战的剩余时间。

示例代码

以下是一个简单的JavaScript结合CSS实现圆圈倒计时的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Circle Countdown</title>
    <style>
        .circle {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            position: relative;
            background-color: #eee;
        }
        .circle::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #4caf50;
            clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
            transform-origin: center;
            animation: rotate 10s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        .circle::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
            clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
            transform-origin: center;
            animation: rotate 10s linear infinite;
            animation-delay: 5s; /* 倒计时5秒 */
        }
    </style>
</head>
<body>
    <div class="circle"></div>
    <script>
        function startCountdown(duration) {
            const circle = document.querySelector('.circle');
            let timeLeft = duration;
            const interval = setInterval(() => {
                timeLeft--;
                if (timeLeft <= 0) {
                    clearInterval(interval);
                }
            }, 1000);
        }
        startCountdown(5); // 倒计时5秒
    </script>
</body>
</html>