多种卡片悬浮动态切换动画效果-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：多种卡片悬浮动态切换动画效果

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <style>
@charset "utf-8";* {
        box-sizing: border-box;
        -webkit-appearance: none
    }

        *:focus {
            outline: none
        }

        html,body {
            height: 100%
        }

        body {
            margin: 0;
            line-height: 1.5;
            font-size: 14px;
            font-family: 微软雅黑,microsoft yahei;
            color: #333;
            background: #fff
        }

        ul,li {
            list-style: none;
            padding: 0;
            margin: 0
        }

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

        .clearfix {
            zoom: 1
        }

        .main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 10px
        }

        .title {
            text-align: center;
            color: #333;
            font-size: 28px;
            margin-bottom: 25px
        }

        .height50 {
            height: 50px
        }

        .bg_main {
            background: #19a7fd
        }

        .w-simgtext ul,.w-simgtext li {
            list-style: none;
            margin: 0;
            padding: 0
        }

        .w-simgtext li {
            margin-bottom: 25px
        }

        .w-simgtext a {
            display: block;
            text-decoration: none
        }

        .w-simgtext a:hover {
            text-decoration: none
        }

        .w-simgtext h3 {
            margin: 0;
            line-height: 1.5;
            font-weight: 400
        }

        .w-simgtext p {
            margin-bottom: 0;
            line-height: 1.7
        }

        .w-simgtext1 li {
            float: left;
            width: 25%;
            *width: 24.99%;
            min-width: 240px
        }

        .w-simgtext1 li .item {
            position: relative;
            width: 227px;
            height: 227px;
            margin: 0 auto;
            text-align: center
        }

        .w-simgtext1 li .sigt1 {
            position: absolute;
            z-index: 1;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0
        }

        .w-simgtext1 li .sigt1 .bg {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            overflow: hidden;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            border: 3px solid #999
        }

        .w-simgtext1 li .sigt1 .sigt_text {
            position: absolute;
            z-index: 1;
            left: 0;
            right: 0;
            padding: 1em 8%;
            top: 50%;
            top: 15%\9;
            *top: 15%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            transition: all .5s;
            -webkit-transition: all .5s
        }

:root .w-simgtext1 li .sigt1 .sigt_text {
            top: 50%
        }

        .w-simgtext1 li .sigt1 .s_img img {
            max-width: 60px;
            max-height: 60px;
            margin-bottom: 10px
        }

        .w-simgtext1 li .sigt1 h3 {
            font-size: 18px;
            color: #333
        }

        .w-simgtext1 li .sigt1 p {
            font-size: 90%;
            color: #aaa;
            margin-top: 5px;
            max-height: 1.7em
        }

        .w-simgtext1 li .sigt2 {
            position: absolute;
            z-index: 2;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            color: #fff
        }

        .w-simgtext1 li .sigt2 .bg {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            *filter: alpha(opacity=0);
            filter: alpha(opacity=0);
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
            transition: all .5s;
            -webkit-transition: all .5s
        }

        .w-simgtext1 li .sigt2 .sigt_text {
            position: absolute;
            z-index: 1;
            left: 0;
            right: 0;
            padding: 1em 8%;
            top: 50%;
            top: 15%\9;
            *top: 15%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            margin-top: 35px;
            opacity: 0;
            *filter: alpha(opacity=0);
            filter: alpha(opacity=0);
            transition: all .5s;
            -webkit-transition: all .5s
        }

:root .w-simgtext1 li .sigt2 .sigt_text {
            top: 50%
        }

        .w-simgtext1 li .sigt2 h3 {
            position: relative;
            font-size: 24px;
            margin-bottom: 35px;
            padding-bottom: 5px
        }

        .w-simgtext1 li .sigt2 h3:after {
            content: '';
            position: absolute;
            left: 50%;
            top: 100%;
            height: 28px;
            width: 1px;
            background: #fff
        }

        .w-simgtext1 li a:hover .sigt1 .sigt_text {
            margin-top: 35px
        }

        .w-simgtext1 li a:hover .sigt2 .bg {
            transform: scale(1);
            -webkit-transform: scale(1);
            opacity: 1;
            *filter: alpha(opacity=100);
            filter: alpha(opacity=100)
        }

        .w-simgtext1 li a:hover .sigt2 .sigt_text {
            margin-top: 0;
            opacity: 1;
            *filter: alpha(opacity=100);
            filter: alpha(opacit.........完整代码请登录后点击上方下载按钮下载查看