滑动导航条特效-html代码-BFW代码库

滑动导航条特效

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> - Navigation bar with circle flexible highlight POC</title>
<link rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css" />
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #E6E9ED;
            min-height: 100vh;
        }
        body nav.tab {
            position: relative;
            display: flex;
            align-items: stretch;
            width: 23rem;
            height: 4rem;
        }
        body nav.tab.moving .icon {
            pointer-events: none;
        }
        body nav.tab[data-selected="1"] .icon:nth-child(1), body nav.tab[data-selected="2"] .icon:nth-child(2), body nav.tab[data-selected="3"] .icon:nth-child(3) {
            top: -1.5rem;
            color: #2ABA66;
            font-size: 2rem;
            transition: 0.25s .........完整代码请登录后点击上方下载按钮下载查看