当前位置：首页 > CSS

css碟片制作

2026-04-01 14:06:23CSS

使用CSS制作旋转碟片效果

通过CSS的animation和transform属性可以创建动态旋转的碟片效果。以下是一个完整的实现示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .disc-container {
            width: 300px;
            height: 300px;
            position: relative;
            margin: 50px auto;
        }

        .disc {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(135deg, #333 0%, #111 100%);
            position: relative;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            animation: spin 4s linear infinite;
        }

        .disc-center {
            position: absolute;
            width: 20%;
            height: 20%;
            background: white;
            border-radius: 50%;
            top: 40%;
            left: 40%;
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }

        .disc-label {
            position: absolute;
            width: 30%;
            height: 30%;
            background: #ff0000;
            border-radius: 50%;
            top: 35%;
            left: 35%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-family: Arial, sans-serif;
            font-size: 12px;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="disc-container">
        <div class="disc">
            <div class="disc-center"></div>
            <div class="disc-label">CSS DISC</div>
        </div>
    </div>
</body>
</html>

添加唱片纹理效果

为增强真实感，可以在碟片上添加同心圆纹理：

.disc::before {
    content: "";
    position: absolute;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    top: 5%;
    left: 5%;
    background: 
        radial-gradient(
            circle, 
            transparent 0%, 
            transparent 30%, 
            rgba(255,255,255,0.1) 30%, 
            rgba(255,255,255,0.1) 31%, 
            transparent 31%, 
            transparent 100%
        ),
        repeating-radial-gradient(
            circle, 
            transparent 0%, 
            transparent 5%, 
            rgba(255,255,255,0.05) 5%, 
            rgba(255,255,255,0.05) 6%, 
            transparent 6%, 
            transparent 10%
        );
}

控制旋转动画

可以通过JavaScript动态控制旋转速度和方向：

const disc = document.querySelector('.disc');
let speed = 1;

// 加速
document.getElementById('faster').addEventListener('click', () => {
    speed += 0.5;
    disc.style.animationDuration = `${4/speed}s`;
});

// 减速
document.getElementById('slower').addEventListener('click', () => {
    if(speed > 0.5) {
        speed -= 0.5;
        disc.style.animationDuration = `${4/speed}s`;
    }
});

// 反向
document.getElementById('reverse').addEventListener('click', () => {
    disc.style.animationDirection = disc.style.animationDirection === 'reverse' ? 'normal' : 'reverse';
});

响应式设计考虑

确保碟片在不同设备上显示良好：

css碟片制作

@media (max-width: 600px) {
    .disc-container {
        width: 200px;
        height: 200px;
    }

    .disc-label {
        font-size: 10px;
    }
}