div+css实现流程图步骤介绍工序悬浮文字效果代码-html代码-BFW代码库

div+css实现流程图步骤介绍工序悬浮文字效果代码

代码语言：html

代码描述：div+css实现流程图步骤介绍工序悬浮文字效果代码

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

<html>

<head>
    <meta charset="utf-8">

    <style>
        @charset "utf-8";
                * {
                margin:0;
                padding:0
        }
        body {
                font-family:'Microsoft YaHei';
                font-size:12px;
                padding-top:200px;
        }
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote {
        
                margin:0
        }
        table,td,tr,th {
                font-size:12px
        }
        li {
                list-style-type:none
        }
        table {
                margin:0 auto
        }
        img {
                vertical-align:top;
                border:0
        }
        ol,ul {
                list-style:none
        }
        caption,th {
                text-align:left
        }
        a {
                text-decoration:none;
                color:#000
        }
        a:hover {
                color:#000;
                text-decoration:none
        }
        .main1140 {
                width:1140px;
                margin:0 auto;
                overflow:hidden
        }
        .process-box {
                width:1140px;
                height:450px
        }
        .process-box ul {
                width:1140px
        }
        .process-box ul li {
                width:196px;
                height:196px;
                float:left;
                cursor:pointer;
                position:relative
        }
        .process-box ul li .kuang {
                position:absolute;
                width:196px;
                height:196px;
                -moz-transform:rotate(45deg);
                -webkit-transform:rotate(45deg);
                -o-transform:rotate(45deg);
                transform:rotate(45deg);
                border:1px solid #ddd;
                margin-top:42px;
                margin-left:42px
        }
        .process-box ul li .kuang1 {
                top:0;
                left:0;
                z-index:1
        }
        .process-box ul li .kuang2 {
                left:5px;
                top:0;
                z-index:2
        }
        .process-box ul li .text1 {
                width:276px;
                height:276px;
                text-align:center;
                z-index:3;
                position:absolute;
                left:7px;
                top:2px
        }
        .process-box ul li .text1 .bg {
                width:276px;
                height:276px
        }
        .process-box ul li .text1 .bg1 {
                background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img1.png) no-repeat
        }
        .process-box ul li .text1 .bg2 {
                background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img2.png) no-repeat
        }
        .process-box ul li .text1 .bg3 {
                background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img3.png) no-repeat
        }
        .process-box ul li .text1 .bg4 {
                background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img4.png) no-repeat
        }
        .process-box ul li .text1 .bg5 {
                background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img5.png) no-repeat
        }
        .process-box ul li .text1 .bg6 {
                background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img6.png) no-repeat
        }
        .process-box ul li .text1 .bg7 {
                background:url(//repo.bfw.wiki/bfwrepo/images/lingxing/process-img7.png) no-repeat
        }
        .process-box ul li .text1 .num {
                padding-top:50px;
                font-size:86px;
                color:#dacdc2;
                font-weight:700
        }
        .process-box ul li .text1 .title {
                font-size:15px;
                color:#422710
        }
        .process-box ul li .text1 .eng {
                font-size:12px;
                color:#b4a078
        }
        .process-box ul li .text2 {
                width:276px;
                height:276px;
                z-index:4;
                position:absolute;
                left:5px;
                top:0;
                display:none
        }
        .process-box ul li .text2 .mengban {
                border:1px solid #533b26;
                position:absolute;
                z-index:1;
                width:196px;
                height:196px;
                -moz-transform:rotate(45deg);
                -webkit-transform:rotate(45deg);
                -o-transform:rotate(45deg);
                transform:rotate(45deg);
                background:#533b26;
                margin-top:42px;
                margin-left:42px
        }
        .process-box ul li .text2 .desc {
                position:ab.........完整代码请登录后点击上方下载按钮下载查看