js实现环形
实现环形动画
使用CSS和JavaScript创建一个环形动画效果。通过CSS定义环形的基本样式，JavaScript控制动画的交互逻辑。
<!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动态更新进度。
<!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>
