使用 html css 和 js 程式碼的導覽列圖示選項 ui/ux

    
    
    <title>移動滑桿</title>
    
        身體 {
            保證金：0；
            填充：0；
            字體系列：Arial、無襯線字體；
            顯示：柔性；
            調整內容：居中；
            對齊項目：居中；
            高度：100vh；
            背景：線性漸變（到底部，#1a1a2e，#16213e）；
            顏色: 白色;
        }

        .slider-container {
            顯示：柔性；
            彈性包裹：包裹；
            間隙：10px；
            寬度：500px；
            justify-content：空間均勻；
            對齊項目：居中；
        }

        .slider-item {
            顯示：柔性；
            彈性方向：列；
            對齊項目：居中；
            調整內容：居中；
            位置：相對；
            寬度：80px；
            高度：80像素；
            背景：#1f4068；
            邊界半徑：50%；
            過渡：變換 0.3 秒緩動，盒子陰影 0.3 秒緩動，背景 0.3 秒緩動；
            盒子陰影：0 4px 6px rgba(0, 0, 0, 0.2);
            遊標：指針；
        }

        .slider-item:懸停{
            變換：縮放（1.1）；
            盒子陰影：0 6px 10px rgba(0, 0, 0, 0.3);
        }

        .slider-item.active {
            背景：線性漸變（向右，#ff7e5f，#feb47b）； /* 活躍的有吸引力的梯度 */
            變換：縮放（1.2）； /* 尺寸稍大一些 */
            盒子陰影: 0 8px 12px rgba(255, 126, 95, 0.5);
        }

        .slider-item i {
            字體大小：28px；
            顏色: 白色;
        }

        .slider-item span {
            上邊距：8px；
            /* 字體大小: 8px; */
            顏色: 白色;
            文字對齊：居中；
        }

        。標籤 {
            字體大小：12px；
            左邊距：15px；
            顏色: 白色;
            上邊距：10px；
        }
    風格>
    
頭>

    <div>




          </div>

            
        

以上是使用 html css 和 js 程式碼的導覽列圖示選項 ui/ux的詳細內容。更多資訊請關注PHP中文網其他相關文章！