css圆形导航栏

<!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-nav {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .circle-item {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #3498db;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        .circle-item:hover {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div class="circle-nav">
        <div class="circle-item">1</div>
        <div class="circle-item">2</div>
        <div class="circle-item">3</div>
        <div class="circle-item">4</div>
    </div>
</body>
</html>

.circle-item {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* 其他样式 */
}

@media (max-width: 600px) {
    .circle-item {
        width: 40px;
        height: 40px;
    }
}