使用 html css 和 js 代码的导航栏图标选项 ui/ux-js教程-PHP中文网

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

Barbara Streisand

发布： 2024-12-25 14:18:10

原创

239 人浏览过

Navbar icons options ui/ux using html css and js code

<html lang="zh-cn">
<头>
    
    
    <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；
        }
    </风格>
    <链接 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</头>

    <div>




          </div>

登录后复制

以上是使用 html css 和 js 代码的导航栏图标选项 ui/ux的详细内容。更多信息请关注PHP中文网其他相关文章！