jquery实现软件功能介绍tab标签切换效果代码

代码语言:html

所属分类:选项卡

代码描述:jquery实现软件功能介绍tab标签切换效果代码

代码标签: 功能 介绍 tab 标签 切换 效果

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
@charset "utf-8";


        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
            font-size: 12px;
            color: #000;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .gongneng_main {
            height: 785px;
            width: 1200px;
            margin: 0 auto;
        }
        .Small_tedian_tit {
            text-align: center;
            font-size: 32px;
            color: #333;
            padding-top: 95px;
            padding-bottom: 40px;
        }
        .gongneng_tab {
            width: 520px;
            height: 45px;
            border-radius: 25px;
            border: 1px solid #f3f3f3;
            margin: 0 auto;
            box-shadow: 0px -2px 2px #e8e6e6;
            margin-bottom: 80px;
        }
        .gongneng_tabmin {
            width: 392px;
            margin: 0 auto;
            overflow: hidden;
            padding: 5px 0;
        }
        .gongneng_click {
            cursor: pointer;
            width: 35px;
            height: 35px;
            margin: 0 7px;
            float: left;
            text-align: center;
            position: relative;
        }
        .gongneng_click b {
            font-weight: 400;
            position: relative;
            z-index: 2;
            color: #555;
            line-height: 35px;
            font-size: 20px;
            transition: all .5s ease;
        }
        .gongneng_click i {
            position: absolute;
            width: 0;
            height: 0;
            left: 50%;
            top: 50%;
            background-color: #00b0ff;
            box-shadow: 0 3px 10px #b4e9ff;
            border-radius: 50%;
            z-index: 1;
            transition: all .2s ease;
        }
        .gongneng_click.cur b {
            color: #fff;
        }
        .gongneng_click.cur i {
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
        .gongneng_tabcon {
            overflow: hidden;
            display: none;
        }
        .gongneng_left1 {
            width: 537px;
            height: 354px;
            float: left;
            margin-left: 150px;
            margin-right: 130px;
        }
        .gongneng_right1 {
            overflow: hidden;
        }
        .gongneng_right1 b {
            font-size: 90px;
            display: block;
            color: #ededed;
            margin-top: 35px;
            padding-bottom: 20px;
        }
        .gongneng_right1 em {
            font-size: 24px;
            display: block;
            color: #555;
            padding-bottom: 20px;
        }
        .gongneng_right1 p {
            font-size: 14px;
            display: block;
            color: #777;
            padding-bottom: 5px;
        }
        .gongneng_left2 {
            width: 583px;
            height: 358px;
            overflow: hidden;
        }
        .gongneng_right2 {
            float: left;
            margin-left: 220px;
            margin-right: 130px;
        }
        .gongneng_right2 b {
            font-size: 90px;
            display: block;
            color: #ededed;
            margin-top: 35px;
            padding-bottom: 20px;
        }
        .gongneng_right2 em {
            font-size: 24px;
            display: block;
            color: #555;
            padding-bottom: 20px;
        }
        .gongneng_right2 p {
            font-size: 14px;
            display: block;
            color: #777;
            padding-bottom: 5px;
        }
        .gongneng_left3 {
            width: 552px;
            height: 364px;
            float: left;
            margin-left: 190px;
            margin-right: 70px;
        }
        .gongneng_right3 {
            overflow: hidden;
        }
        .gongneng_right3 b {
            font-size: 90px;
            display: block;
            color: #ededed;
            margin-top: 55px;
            padding-bottom: 20px;
        }
        .gongneng_right3 em {
            font-size: 24px;
            display: block;
            color: #555;
            padding-bottom: 15px;
        }
        .gongneng_right3 p {
            font-size: 14px;
            display: block;
            color: #777;
            padding-bottom: 5px;
        }
        .gongneng_left4 {
            width: 360px;
            height: 347px;
            float: right;
            margin-right: 120px;
        }
        .gongneng_right4 {
            float: left;
            margin-left: 220px;
            margin-right: 130px;
        }
        .gongneng_right4 b {
            font-size: 90px;
            display: block;
            color: #ededed;
            margin-top: 35px;
            padding-bottom: 20px;
        }
        .gongneng_right4 em {
            font-size: 24px;
            display: block;
            color: #555;
            padding-bottom: 20px;
        }
        .gongneng_right4 p {
            font-size: 14px;
            display: block;
            color: #777;
            padding-bottom: 5px;
        }
        .gongneng_left5 {
            width: 550px;
            height: 362px;
            float: left;
            margin-left: 160px;
            margin-right: 110px;
        }
        .gongneng_right5 {
            overflow: hidden;
        }
        .gongneng_right5 b {
            font-size: 90px;
            display: block;
            color: #ededed;
            margin-top: 55px;
            padding-bottom: 20px;
        }
        .gongneng_right5 em {
            font-size: 24px;
            display: block;
            color: #555;
            padding-bottom: 15px;
        }
        .gongneng_right5 p {
            font-size: 14px;
            display: block;
            color: #777;
            padding-bottom: 5px;
        }
        .gongneng_left6 {
            width: 550px;
            height: 342px;
            float: right;
            margin-right: 50px;
        }
        .gongneng_right6 {
            float: left;
            margin-left: 220px;
            margin-right: 130px;
        }
        .gongneng_right6 b {
            font-size: 90px;
            display: block;
            color: #ededed;
            margin-top: 35px;
            padding-bottom: 20px;
        }
        .gongneng_right6 em {
            font-size: 24px;
            display: block;
            color: #555;
            padding-bottom: 20px;
        }
        .gongneng_right6 p {
            font-size: 14px;
            display: block;
            color: #777;
            padding-bottom: 5px;
        }
        .gongneng_left7 {
            width: 305px;
            height: 348px;
            float: left;
            margin-left: 230px;
        }
        .gongneng_right7 {
            float: right;
            margin-right: 280px;
        }
        .gongneng_right7 b {
            font-size: 90px;
            display: block;
            color: #ededed;
            margin-top: 35px;
            padding-bottom: 20px;
        }
        .gongneng_right7 em {
            font-size: 24px;
            display: block;
            color: #555;
            padding-bottom: 20px;
        }
        .gongneng_right7 p {
            font-size: 14px;
            display: block;
            color: #777;
            padding-bottom: 5px;
        }
        /*动画*/
        .fadeInRight {
            animation: fadeInRight 1s
        }
@keyframes fadeInRight {
            0% {
                opacity: 0;
                transform: translateX(20px)
            }

            100% {
                opacity: 1;
                transform: translateX(0)
            }}
        .fadeInLeft {
            animation: fadeInLeft 1s
        }
@keyframes fadeInLeft {
            0% {
                opacity: 0;
                transform: translateX(-20px)
            }

            100% {
                opacity: 1;
                transform: translateX(0)
            }}



    </style>

</head>

<body>

    <div class="gongneng">
        <div class="gongneng_main" id="gongneng_main">
            <div class="Small_tedian_tit">
                建站小程序功能特点
            </div>
            <div class="gongneng_tab">
                <div class="gongneng_tabmin">
                    <div class="gongneng_click cur">
                        <i></i><b>1</b>
                    </div>
                    <div class=.........完整代码请登录后点击上方下载按钮下载查看

网友评论0