css布局实现行业卡片悬浮列表效果代码-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：css布局实现行业卡片悬浮列表效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        /* 公共样式表css */
        html,body {
            color: #333;
            margin: 0;
            height: 100%;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        img {
            border: 0;
        }

        body {
            background: #F4F5F9;
            color: #666;
            font-family: 'Microsoft Yahei', 'PingFangSC', sans-serif;
        }

        html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #08acee;
        }

        button {
            outline: 0;
        }

        img {
            border: 0;
        }

        button,input,optgroup,select,textarea {
            margin: 0;
            font: inherit;
            color: inherit;
            outline: none;
        }

        li {
            list-style: none;
        }

        a {
            color: #666;
        }

        a:hover {
            color: #eee;
        }

        .clearfix::after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }

        .clearfix {}

        /* 必要布局样式css */
        .trade-content {
            padding: 30px 0;
        }

        .trade-title {
            font-size: 24px;
            color: #333;
            text-align: center;
            margin: 50px 0;
            position: relative;
        }

        .trade-title:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            bottom: -19px;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid;
            border-color: #20B09F transparent transparent;
        }

        .trade-title:after {
            content: "";
            position: absolute;
            width: 52px;
            height: 3px;
            background-color: #20B09F;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
        }

        .trade-black {
            height: 400px;
            background-color: #30383e;
        }

        .trade-box {
            width: 1200px !important;
            margin: 0 auto;
            position: relative;
            transition: all .3s ease;
        }

        .trade-box-list {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .trade-box-item {
            flex: 1;
            text-align: center;
            position: relative;
            height: 400px;
            background: no-repeat center;
            background-size: 100% auto;
        }

        .trade-content .trade-box-item:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(0,0,0,.6);
            transition: all .4s cubic-bezier(.4, 0, .2, 1);
        }

        .trade-box-item a {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }

        a, button, input, textarea {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -moz-transition: all .3s ease;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
        }

        .item-logo {
            margin: 0 auto;
            display: block;
        }

        .trade-content .trade-box-item .item-logo {
            position: relative;
            margin-top: 120px;
            transition: all .4s cubic-bezier(.4, 0, .2, 1);
        }

        .item-logo img {
            display: block;
            margin: 0 auto;
            max-width: 100%;
        }

        .item-title {
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            padding: 20px 0;
            position: relative;
        }

        .trade-content .item-title:before {
            content: "";
            position: relative;
            display: block;
            width: 20px;
            border-bottom: 2px solid #fff;
            margin: 0 auto 20px;
            transition: all .4s cubic-bezier(.4, 0, .2, 1);
        }

        .item-text {
            position: relative;
            transition: all .4s cubic-bezier(.4, 0, .2, 1);
            opacity: 0;
            margin-top: 10px;
        }

        .item-text p {
            color: #fff;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .trade-content .item01 {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60e1912e6fa93.png);
        }

        .trade-content .item02 {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60e19141dcace.png);
        }

        .trade-content .item03 {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60e19151088d0.png);
        }

        .trade-content .item04 {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60e19165b200b.png);
        }

        .trade-content .item05 {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60e1917461f02.png);
        }

        .trade-content .trade-box-item:hover .item-text {
            display: block;
            opacity: 1;
            margin-top: 0;
        }

        .trade-content .trade-box-item:hover:before {
            background-color: rgba(32, 176, 159, .9);
        }

        .trade-content .trade-box-item:hover .item-logo {
            margin-top: 80px;
        }

        .trade-content .trade-box-item:hover .item-title:before {
            opacity: 0;
            margin-bottom: 0;
        }

    </style>
</head>
<body>



    <div class="trade-content">
        <div class="trade-title">
            <p>
                企业行业专属建站
            </p>
        </div>
        <div class="trade-black">
            <div class="trade-box">
                <div class="trade-box-list">
                    <div class="trade-box-item item01">
                        <a href="#">
                            <div class="item-logo">
                               <img src='data:image/svg+xml;UTF8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="54px" height="54px">
    <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M54.000,26.999 C54.000,41.911 41.912,53.999 27.000,53.999 C12.088,53.999 -0.000,41.911 -0.000,26.999 C-0.000,12.087 12.088,-0.001 27.000,-0.001 C41.912,-0.001 54.000,12.087 54.000,26.999 L54.000,26.999 ZM50.885,26.999 C50.885,13.808 40.193,3.114 27.000,3.114 C13.809,3.114 3.115,13.808 3.115,26.999 C3.115,40.192 13.809,50.883 27.000,50.883 C40.193,50.883 50.885,40.192 50.885,26.999 L50.885,26.999 ZM28.448,15.707 L34.107,25.348 L41.970,25.348 C44.575,25.348 46.639,27.526 46.639,30.166 C46.639,32.808 44.575,34.991 41.972,34.991 L10.212,34.991 L7.657,21.491 L13.552,21.491 L16.586,25.348 L22.499,25.348 L18.746,15.707 L28.448,15.707 ZM26.664,18.822 L23.303,18.822 L25.405,24.218 L27.056,28.463 L15.074,28.463 L14.140,27.275 L12.038,24.607 L11.417,24.607 L12.794,31.876 L41.975,31.876 C42.828,31.876 43.524,31.111 43.524,30.168 C43.524,29.228 42.826,28.463 41.970,28.463 L32.321,28.463 L31.420,26.924 L26.664,18.822 Z"/>
</svg>' alt="">
                            </div>
                            <div class="item-title">
                                外贸行业
                            </div>
                            <div class="item-text">
                                <p>
                                    母语级翻译
                                </p>
                                <p>
                                    提供“海外部署”
                                </p>
                                <p>
                                    打通海外社交媒体
                                </p>
                                <p>
                                    海外商机汇集
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="trade-box-item item02">
                        <a href="#">
                            <div class="item-logo">
                               <img src='data:image/svg+xml;UTF8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52px" height="52px">
    <path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M50.529,19.412 C51.342,19.412 52.000,20.070 52.000,20.882 L52.000,31.471 C52.000,37.146 47.382,41.765 41.706,41.765 L27.471,41.765 L27.471,50.529 C27.471,51.341 26.812,52.000 26.000,52.000 C25.188,52.000 24.529,51.341 24.529,50.529 L24.529,41.765 L10.294,41.765 C4.618,41.765 -0.000,37.146 -0.000,31.471 L-0.000,10.294 C-0.000,4.618 4.618,-0.001 10.294,-0.001 L41.706,-0.001 C47.382,-0.001 52.000,4.618 52.000,10.294 C52.000,11.106 51.342,11.765 50.529,11.765 C49.717,11.765 49.059,11.106 49.059,10.294 C49.059,6.240 45.761,2.941 41.706,2.941 L10.294,2.941 C6.240,2.941 2.941,6.240 2.941,10.294 L2.941,31.471 C2.941,35.525 6.240,38.823 10.294,38.823 L41.706,38.823 C45.761,38.823 49.059,35.525 49.059,31.471 L49.059,20.882 C49.059,20.070 49.717,19.412 50.529,19.412 ZM19.078,43.548 C19.652,42.974 20.583,42.974 21.158,43.548 C21.732,44.123 21.732,45.054 21.158,45.628 L15.275,51.511 C14.988,51.798 14.612,51.942 14.235,51.942 C13.859,51.942 13.483,51.798 13.196,51.511 C12.621,50.937 12.621,50.005 13.196,49.431 L19.078,43.548 ZM32.922,43.548 L38.805,49.431 C39.379,50.005 39.379,50.937 38.805,51.511 C38.518,51.798 38.141,51.942 37.765,51.942 C37.388,51.942 37.012,51.798 36.725,51.511 L30.843,45.628 C30.268,45.054 30.268,44.123 30.843,43.548 C31.417,42.974 32.348,42.974 32.922,43.548 Z"/>
</svg>' alt="">
                            </div>
                            <div class="item-title">
                                培训行业
                            </div>
                            <div class="item-text">
                                <p>
                                    课程管理
                                </p>
                                <p>
                                    线上报名缴费
                                </p>
                                <p>
                                    约课\试听
                                <.........完整代码请登录后点击上方下载按钮下载查看