当前位置：首页 > JavaScript

js实现环形

2026-02-01 16:44:53JavaScript

实现环形动画

使用CSS和JavaScript创建一个环形动画效果。通过CSS定义环形的基本样式，JavaScript控制动画的交互逻辑。

js实现环形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环形动画</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 5px solid transparent;
            border-top-color: #3498db;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="circle" id="circle"></div>
    <script>
        const circle = document.getElementById('circle');
        circle.addEventListener('click', () => {
            circle.style.animationPlayState = circle.style.animationPlayState === 'paused' ? 'running' : 'paused';
        });
    </script>
</body>
</html>

环形进度条

创建一个环形进度条，使用SVG和JavaScript动态更新进度。

js实现环形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环形进度条</title>
    <style>
        .progress-container {
            width: 100px;
            height: 100px;
            position: relative;
        }
        .progress-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="progress-container">
        <svg width="100" height="100" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="45" fill="none" stroke="#e0e0e0" stroke-width="10"/>
            <circle id="progress-bar" cx="50" cy="50" r="45" fill="none" stroke="#3498db" stroke-width="10" stroke-dasharray="283" stroke-dashoffset="283"/>
        </svg>
        <div class="progress-text" id="progress-text">0%</div>
    </div>
    <script>
        const progressBar = document.getElementById('progress-bar');
        const progressText = document.getElementById('progress-text');
        let progress = 0;
        const interval = setInterval(() => {
            progress += 1;
            const offset = 283 - (283 * progress / 100);
            progressBar.style.strokeDashoffset = offset;
            progressText.textContent = `${progress}%`;
            if (progress >= 100) clearInterval(interval);
        }, 50);
    </script>
</body>
</html>

环形菜单

实现一个环形菜单，点击中心按钮展开环形菜单项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环形菜单</title>
    <style>
        .menu-container {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 50px auto;
        }
        .menu-center {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #3498db;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
            z-index: 10;
        }
        .menu-item {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e74c3c;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
            opacity: 0;
            cursor: pointer;
        }
        .menu-item:hover {
            background: #c0392b;
        }
    </style>
</head>
<body>
    <div class="menu-container">
        <div class="menu-center" id="menu-center"></div>
        <div class="menu-item" id="menu-item-1"></div>
        <div class="menu-item" id="menu-item-2"></div>
        <div class="menu-item" id="menu-item-3"></div>
    </div>
    <script>
        const center = document.getElementById('menu-center');
        const items = [
            document.getElementById('menu-item-1'),
            document.getElementById('menu-item-2'),
            document.getElementById('menu-item-3')
        ];
        let isOpen = false;
        center.addEventListener('click', () => {
            isOpen = !isOpen;
            items.forEach((item, index) => {
                if (isOpen) {
                    const angle = (index * 120) * Math.PI / 180;
                    const x = 70 * Math.cos(angle);
                    const y = 70 * Math.sin(angle);
                    item.style.transform = `translate(${x}px, ${y}px)`;
                    item.style.opacity = '1';
                } else {
                    item.style.transform = 'translate(-50%, -50%)';
                    item.style.opacity = '0';
                }
            });
        });
    </script>
</body>
</html>