jquery实现卡片点击切换文字效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：jquery实现卡片点击切换文字效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>

@import "https://fonts.googleapis.com/css?family=Raleway:400,300,200,500,600,700";
body{
    padding: 40px;
}
        .fa-spin-fast {
            -webkit-animation: fa-spin-fast 0.2s infinite linear;
            animation: fa-spin-fast 0.2s infinite linear;
        }
@-webkit-keyframes fa-spin-fast {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(359deg);
                transform: rotate(359deg);
            }
        }
@keyframes fa-spin-fast {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(359deg);
                transform: rotate(359deg);
            }
        }
        .material-card {
            position: relative;
            height: 0;
            padding-bottom: calc(100% - 16px);
            margin-bottom: 6.6em;
        }
        .material-card h2 {
            position: absolute;
            top: calc(100% - 16px);
            left: 0;
            width: 100%;
            padding: 10px 16px;
            color: #fff;
            font-size: 1.4em;
            line-height: 1.6em;
            margin: 0;
            z-index: 10;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }
        .material-card h2 span {
            display: block;
        }
        .material-card h2 strong {
            font-weight: 400;
            display: block;
            font-size: 0.8em;
        }
        .material-card h2:before,
        .material-card h2:after {
            content: ' ';
            position: absolute;
            left: 0;
            top: -16px;
            width: 0;
            border: 8px solid;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }
        .material-card h2:after {
            top: auto;
            bottom: 0;
        }
@media screen and (max-width: 767px) {
            .material-card.mc-active {
                padding-bottom: 0;
                height: auto;
            }
        }
        .material-card.mc-active h2 {
            top: 0;
            padding: 10px 16px 10px 90px;
        }
        .material-card.mc-active h2:before {
            top: 0;
        }
        .material-card.mc-active h2:after {
            bottom: -16px;
        }
        .material-card .mc-content {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 16px;
            left: 16px;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }
        .material-card .mc-btn-action {
            position: absolute;
            right: 16px;
            top: 15px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            border: 5px solid;
            width: 54px;
            height: 54px;
            line-height: 44px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            z-index: 20;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }
        .material-card.mc-active .mc-btn-action {
            top: 62px;
        }
        .material-card .mc-description {
            position: absolute;
            top: 100%;
            right: 30px;
            left: 30px;
            bottom: 54px;
            overflow: hidden;
            opacity: 0;
            filter: alpha(opacity=0);
            -webkit-transition: all 1.2s;
            -moz-transition: all 1.2s;
            -ms-transition: all 1.2s;
            -o-transition: all 1.2s;
            transition: all 1.2s;
        }
        .material-card .mc-footer {
            height: 0;
            overflow: hidden;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }
        .material-card .mc-footer h4 {
            position: absolute;
            top: 200px;
            left: 30px;
            padding: 0;
            margin: 0;
            font-size: 16px;
            font-weight: 700;
            -webkit-transition: all 1.4s;
            -moz-transition: all 1.4s;
            -ms-transition: all 1.4s;
            -o-transition: all 1.4s;
            transition: all 1.4s;
        }
        .material-card .mc-footer a {
            display: block;
            float: left;
            position: relative;
            width: 52px;
            height: 52px;
            margin-left: 5px;
            margin-bottom: 15px;
            font-size: 28px;
            color: #fff;
            line-height: 52px;
            text-decoration: none;
            top: 200px;
        }
        .material-card .mc-footer a:nth-child(1) {
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -ms-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s;
        }
        .material-card .mc-footer a:nth-child(2) {
            -webkit-transition: all 0.6s;
            -moz-transition: all 0.6s;
            -ms-transition: all 0.6s;
            -o-transition: all 0.6s;
            transition: all 0.6s;
        }
        .material-card .mc-footer a:nth-child(3) {
            -webkit-transition: all 0.7s;
            -moz-transition: all 0.7s;
            -ms-transition: all 0.7s;
            -o-transition: all 0.7s;
            transition: all 0.7s;
        }
        .material-card .mc-footer a:nth-child(4) {
            -webkit-transition: all 0.8s;
            -moz-transition: all 0.8s;
            -ms-transition: all 0.8s;
            -o-transition: all 0.8s;
            transition: all 0.8s;
        }
        .material-card .mc-footer a:nth-child(5) {
            -webkit-transition: all 0.9s;
            -moz-transition: all 0.9s;
            -ms-transition: all 0.9s;
            -o-transition: all 0.9s;
            transition: all 0.9s;
        }
        .material-card .img-container {
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 3;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -ms-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }
        .material-card.mc-active .img-container {
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            left: 0;
            top: 12px;
            width: 60px;
         .........完整代码请登录后点击上方下载按钮下载查看