css - 关于一个前端模块的实现，悬浮选择块-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

大家讲道理 2017-04-17 14:22:34

[HTML讨论组]

445

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

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

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

多谢了～

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(2)

PHP中文网2017-04-17 14:24:34 2楼

就这样

就是鼠标经过时，左边框从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/