多种卡片悬浮动态切换动画效果-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(opacity=100)
        }

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

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

        .w-simgtext2 li .s_img {
            max-width: 70px;
            max-height: 70px;
            margin: 0 auto;
            overflow: hidden
        }

        .w-simgtext2 li .s_img img {
            max-width: 100%;
            max-height: 100%;
            transition: all .5s;
            -webkit-transition: all .5s
        }

        .w-simgtext2 li .line {
            height: 1px;
            margin: 15px auto
        }

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

        .w-simgtext2 li .sigt1 .bg {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            overflow: hidden;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            border: 1px solid #999;
            transition: all .5s;
            -webkit-transition: all .5s
        }

        .w-simgtext2 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-simgtext2 li .sigt1 .sigt_text {
            top: 50%
        }

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

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

        .w-simgtext2 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(.7);
            -webkit-transform: scale(.7);
            transition: all .5s;
            -webkit-transition: all .5s
        }

        .w-simgtext2 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%);
            opacity: 0;
            *filter: alpha(opacity=0);
            filter: alpha(opacity=0);
            transition: all .5s;
            -webkit-transition: all .5s
        }

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

        .w-simgtext2 li .sigt2 .s_img img {
            transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transition: all .5s;
            -webkit-transition: all .5s
        }

        .w-simgtext2 li .sigt2 .line {
            width: 0;
            background: #fff;
            transition: all .5s;
            -webkit-transition: all .5s
        }

        .w-simgtext2 li .sigt2 h3 {
            font-size: 16px;
            color: #fff
        }

        .w-simgtext2 li a:hover .sigt1 .bg {
            transform: scale(1.3);
            -webkit-transform: scale(1.3);
            opacity: 0;
            *filter: alpha(opacity=0);
            filter: alpha(opacity=0)
        }

        .w-simgtext2 li a:hover .sigt1 .s_img img {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%)
        }

        .w-simgtext2 li a:hover .sigt2 .s_img img {
            transform: translateX(0);
            -webkit-transform: translateX(0)
        }

        .w-simgtext2 li a:hover .sigt2 .line {
            width: 80px
        }

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

        .w-simgtext2 li a:hover .sigt2 .sigt_text {
            opacity: 1;
            *filter: alpha(opacity=100);
            filter: alpha(opacity=100)
        }

        .w-simgtext3 ul {
            position: relative;
            z-index: 2
        }

        .w-simgtext3 ul li {
            width: 25%;
            padding-bottom: 20px;
            float: left;
            text-align: center
        }

        .w-simgtext3 ul li .item {
            margin: 0 auto;
            padding: 1px 10px;
            padding-bottom: 30px;
            position: relative;
            background: url(http://repo.bfw.wiki/bfwrepo/image/5f45017cbd7ee.png) no-repeat center -400px;
            overflow: hidden
        }

        .w-simgtext3 ul li i {
            display: block;
            position: relative;
            margin: 0 auto;
            margin-top: 45px;
            height: 120px;
            width: 120px;
            background: url(http://repo.bfw.wiki/bfwrepo/image/5f4501c9db832.png) no-repeat
        }

        .w-simgtext3 ul li.indexs1 i {
            background-position: 0 0
        }

        .w-simgtext3 ul li.indexs2 i {
            background-position: 0 -120px
        }

      .........完整代码请登录后点击上方下载按钮下载查看