问

css - 关于一个前端模块的实现，悬浮选择块

本人xiao13 发布于 2022-11-02 08:07

最近要写一个小项目。有一个功能就是在页面的右边有几个方块悬浮，类似于navbar（不过是竖着的）。具备选项卡的功能。效果和感觉可以参考下网址：
http://www.catswhocode.com/bl...
左边的那几个社交网站分享的选项卡。

其实主要是css和html的布局以及样式什么的。有没有谁做过类似的，能给点思路什么的。

本来是写后台的，被拉来做前端，正在飞速学习中。

多谢了～

2 个回答

用chrome 按F12 然后选定随意一个块

你会发现是一个li标签，在Filter里将这个标签选择：hov，然后你就会看到你鼠标悬浮上去后这个li发生的变化，无非是本身带有transition属性设置了0.3S的动画时间，改变的是宽度和左边框线。

这是一个看起来复杂但是其实实行起来非常简单的特效。

2022-11-04 04:30 回答

手机用户2502885633

就这样

就是鼠标经过时，左边框从0变成4 自身宽度变窄（视觉上就像翻过去一样）,过程用时0.3秒（transition）

<body>
    <p class="wrap">
        <ul>
            <li><a href="" class="item-1">A</a></li>
            <li><a href="" class="item-2">B</a></li>
            <li><a href="" class="item-3">C</a></li>
            <li><a href="" class="item-4">D</a></li>
        </ul>
    </p>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .wrap {
        position: fixed;
        left: 0;
        top: 40%;
        text-align: center;
        font-weight: 800;
    }

    .wrap a {
        display: block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        transition: all 0.3s;
        border-left: 0 solid rgba( 0, 0, 0, .4);
    }

    .wrap a:hover {
        border-left: 4px solid rgba( 0, 0, 0, .3);
        width: 30px;
    }

    .item-1 {
        background-color: #314a83;
    }
    .item-2 {
        background-color: #00abf0;
    }

    .item-3 {
        background-color: #df4a32;
    }

    .item-4 {
        background-color: #546b9f;
    }
    </style>
</body>

https://jsfiddle.net/cct80n00/

2022-11-04 04:31 回答

浪漫满屋19860902692

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签