css实现三维立体按钮选项卡悬浮切换效果代码-html代码-BFW代码库

代码语言：html

所属分类：选项卡

代码描述：css实现三维立体按钮选项卡悬浮切换效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        h1,h2 {
            margin-bottom: 2%
        }

        .k_list-item,h1 {
            text-align: center
        }

        .k_list-item,ul {
            position: relative
        }

        body {
            background: #f2f2f2;
            font-family: Roboto,sans-serif
        }

        h1 {
            font-size: 250%;
            margin-top: 3%;
            color: #3F51B5
        }

        h2 {
            font-size: 150%
        }

        .k_menu {
            margin-top: 2%;
            margin-left: 5%;
            margin-right: 3%;
            width: 5%;
            float: left
        }

@font-face {
            font-family:'Material Icons';font-style:normal;font-weight:400;src:local('Material Icons'),local('MaterialIcons-Regular'),url(//repo.bfw.wiki/bfwrepo/fonts/Material.woff2) format('woff2')
        }

        .k_menu_material-icons {
            font-family: 'Material Icons';
            font-weight: 400;
            font-style: normal;
            font-size: 24px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-feature-settings: 'liga';
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            color: #FFF;
            -webkit-transform: translate3d(0,6px,0);
            transform: translate3d(0,6px,0)
        }

        .k_list-item {
            background: #3F51B5;
            height: 2.5em;
            width: 4em;
            vertical-align: middle;
            line-height: 2.5em;
            border-bottom: 1px solid #060606;
            display: block;
            text-decoration: none;
            box-shadow: -1em 1em 0 #e1e1e1;
            -webkit-transition: all .25s linear;
            transition: all .25s linear
        }

        .k_list-item:after {
            height: 4em;
            background: #303F9F;
            bottom: -2.25em;
            left: 1.5em;
            -webkit-transform: rotate(90deg) skew(0,45deg);
            transform: rotate(90deg) skew(0,45deg)
        }

        .k_list-item:before {
            height: 2.5em;
            background: #303F9F;
            top: .25em;
            left: -.5em;
            -webkit-transform: skewY(-45deg);
            transform: skewY(-45deg)
        }

        .k_list-item:after,.k_list-item:before {
            content: '';
            position: absolute;
            -webkit-transition: all .25s linear;
            transition: all .25s linear;
            width: .5em
        }

        .k_list-item:hover {
            background: #E91E63;
            -webkit-transform: translate(.5em,-.5em);
            transform: translate(.5em,-.5em);
            -webkit-transition: all .25s linear;
            transition: all .25s linear;
            box-shadow: -1.5em 1.5em 0 #e1e1e1
        }

        .k_list-item:hover:after,.k_list-item:hover:before {
            -webkit-transition: all .25s linear;
            transition: all .25s linear
        }

        .k_list-item:hover:before {
            background: #C2185B;
            width: 1em;
            top: .5em;
            left: -1em
        }

        .k_list-item:hover:after {
            background: #C2185B;
            width: 1em;
            bottom: -2.5em;
            left: 1em;
            height: 4em
        }

        .content {
            margin: 4% 15% 0 auto;
            width: 60%;
            float: right;
            background: #fff;
            position: relative;
            min-height: 250px;
        }

        .tabbed-area div div {
            background: #303F9F;
            color: #fff;
            padding: 20px;
            min-height: 250px;
            position: absolute;
            top: -1px;
            left: 0;
            width: 100%
        }

        .content li a,.tabbed-area div div {
            border: 1px solid #ccc;
        }

        #box-eight:target,#box-five:target,#box-four:target,#box-nine:target,#box-one:target,#box-seven:target,#box-six:target,#box-three:target,#box-two:target {
            z-index: 1
        }

@media (max-width: 600px) {
            .content {
                width: 50%;
            }}
    </style>

</head>

<body>

    <div class="tabbed-area">
        <div class='k_menu'>
            <ul class="group">
                <li>
                    <a class='k_list-item' href='#box-one'>
                        <i class="k_menu_material-icons">home</i> </a>
                </a>
            </li>
            <li>
                <a class='k_list-item' href='#box-two'>
                    <i class="k_menu_material-icons">event</i> </a>
            </a>
        </li>
        <li>
            <a class='k_list-item' href='#box-three'>
                <i class="k_menu_material-icons">search</i> </a>
        </a>
    </li>
    <li>
        <a class='k_list-item' href='#box-four'>
            <i class="k_menu_material-icons">done</i> </a>
    </a>
</li>
<li>
    <a class='k_list-item' href='#box-five'>
        <i class="k_menu_material-icons">star</i> </a>
</a>
</li>
<li>
<a class='k_list-item' href='#box-six'>
<i class="k_menu_material-icon.........完整代码请登录后点击上方下载按钮下载查看