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

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

代码语言：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;
       .........完整代码请登录后点击上方下载按钮下载查看