css+jquery实现卡片点击翻转动画效果代码-html代码-BFW代码库

css+jquery实现卡片点击翻转动画效果代码

代码语言：html

代码描述：css+jquery实现卡片点击翻转动画效果代码

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

<html>
<head>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: column wrap;
            background: #1f1f1f;
            color: white;
            font-family: "Lato";
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            max-width: 800px;
            width: 100%;
            margin: 0 auto;
            padding: 15px;
            text-align: center;
            overflow-x: hidden;
        }

        .card {
            float: left;
            position: relative;
            width: calc(100% * .3333 - 30px + .3333 * 30px);
            height: 340px;
            margin: 0 30px 30px 0;
            perspective: 1000;
        }
        .card:first-child .card__front {
            background: #5271C2;
        }
        .card:first-child .card__num {
            text-shadow: 1px 1px rgba(52, 78, 147, 0.8) , 2px 2px rgba(52, 79, 148, 0.802) , 3px 3px rgba(53, 79, 148, 0.804) , 4px 4px rgba(53, 80, 149, 0.806) , 5px 5px rgba(54, 80, 150, 0.808) , 6px 6px rgba(54, 81, 150, 0.81) , 7px 7px rgba(55, 81, 151, 0.812) , 8px 8px rgba(55, 82, 152, 0.814) , 9px 9px rgba(55, 82, 152, 0.816) , 10px 10px rgba(56, 83, 153, 0.818) , 11px 11px rgba(56, 83, 154, 0.82) , 12px 12px rgba(57, 83, 154, 0.822) , 13px 13px rgba(57, 84, 155, 0.824) , 14px 14px rgba(57, 84, 156, 0.826) , 15px 15px rgba(58, 85, 156, 0.828) , 16px 16px rgba(58, 85, 157, 0.83) , 17px 17px rgba(59, 86, 157, 0.832) , 18px 18px rgba(59, 86, 158, 0.834) , 19px 19px rgba(59, 87, 159, 0.836) , 20px 20px rgba(60, 87, 159, 0.838) , 21px 21px rgba(60, 88, 160, 0.84) , 22px 22px rgba(61, 88, 160, 0.842) , 23px 23px rgba(61, 88, 161, 0.844) , 24px 24px rgba(61, 89, 162, 0.846) , 25px 25px rgba(62, 89, 162, 0.848) , 26px 26px rgba(62, 90, 163, 0.85) , 27px 27px rgba(62, 90, 163, 0.852) , 28px 28px rgba(63, 90, 164, 0.854) , 29px 29px rgba(63, 91, 164, 0.856) , 30px 30px rgba(63, 91, 165, 0.858) , 31px 31px rgba(64, 92, 165, 0.86) , 32px 32px rgba(64, 92, 166, 0.862) , 33px 33px rgba(64, 92, 166, 0.864) , 34px 34px rgba(65, 93, 167, 0.866) , 35px 35px rgba(65, 93, 167, 0.868) , 36px 36px rgba(65, 94, 168, 0.87) , 37px 37px rgba(66, 94, 169, 0.872) , 38px 38px rgba(66, 94, 169, 0.874) , 39px 39px rgba(66, 95, 170, 0.876) , 40px 40px rgba(67, 95, 170, 0.878) , 41px 41px rgba(67, 96, 171, 0.88) , 42px 42px rgba(67, 96, 171, 0.882) , 43px 43px rgba(68, 96, 171, 0.884) , 44px 44px rgba(68, 97, 172, 0.886) , 45px 45px rgba(68, 97, 172, 0.888) , 46px 46px rgba(69, 97, 173, 0.89) , 47px 47px rgba(69, 98, 173, 0.892) , 48px 48px rgba(69, 98, 174, 0.894) , 49px 49px rgba(69, 98, 174, 0.896) , 50px 50px rgba(70, 99, 175, 0.898) , 51px 51px rgba(70, 99, 175, 0.9) , 52px 52px rgba(70, 99, 176, 0.902) , 53px 53px rgba(71, 100, 176, 0.904) , 54px 54px rgba(71, 100, 177, 0.906) , 55px 55px rgba(71, 100, 177, 0.908) , 56px 56px rgba(71, 101, 177, 0.91) , 57px 57px rgba(72, 101, 178, 0.912) , 58px 58px rgba(72, 101, 178, 0.914) , 59px 59px rgba(72, 102, 179, 0.916) , 60px 60px rgba.........完整代码请登录后点击上方下载按钮下载查看