使用 html css 和 js 代码的导航栏图标选项 ui/ux

PHP中文网 • 2025年3月7日 07:16:19 • 编程技术 • 阅读 2

            Mobile Slider            body {            margin: 0;            padding: 0;            font-family: Arial, sans-serif;            display: flex;            justify-content: center;            align-items: center;            height: 100vh;            background: linear-gradient(to bottom, #1a1a2e, #16213e);            color: white;        }        .slider-container {            display: flex;            flex-wrap: wrap;            gap: 10px;            width: 500px;            justify-content: space-evenly;            align-items: center;        }        .slider-item {            display: flex;            flex-direction: column;            align-items: center;            justify-content: center;            position: relative;            width: 80px;            height: 80px;            background: #1f4068;            border-radius: 50%;            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);            cursor: pointer;        }        .slider-item:hover {            transform: scale(1.1);            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);        }        .slider-item.active {            background: linear-gradient(to right, #ff7e5f, #feb47b); /* Attractive gradient for active */            transform: scale(1.2); /* Slightly larger size */            box-shadow: 0 8px 12px rgba(255, 126, 95, 0.5);        }        .slider-item i {            font-size: 28px;            color: white;        }        .slider-item span {            margin-top: 8px;            /* font-size: 8px; */            color: white;            text-align: center;        }        .label {            font-size: 12px;            margin-left: 15px;            color: white;            margin-top: 10px;        }                                                            
            WiFi        
                                                
            Notification        
                                                
            Speaker        
                                                
            Mobile Data        
    
            function toggleActive(element) {            const isActive = element.classList.contains('active');            document.querySelectorAll('.slider-item').forEach(item => item.classList.remove('active'));            if (!isActive) {                element.classList.add('active');            }        }