css实现扑克牌抽牌倒计时计时动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现扑克牌抽牌倒计时计时动画效果代码盒子分解动画效果代码，没有任何js代码，纯css+div实现。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Heebo:wght@100;400&amp;display=swap'>

    <style>
        :root {
          --body-bi:
           linear-gradient(30deg, #D7D0C8 12%, transparent 12.5%, transparent 87%, #D7D0C8 87.5%, #D7D0C8),
           linear-gradient(150deg, #D7D0C8 12%, transparent 12.5%, transparent 87%, #D7D0C8 87.5%, #D7D0C8),
           linear-gradient(30deg, #D7D0C8 12%, transparent 12.5%, transparent 87%, #D7D0C8 87.5%, #D7D0C8),
           linear-gradient(150deg, #D7D0C8 12%, transparent 12.5%, transparent 87%, #D7D0C8 87.5%, #D7D0C8),
           linear-gradient(60deg, #D7D0C877 25%, transparent 25.5%, transparent 75%, #D7D0C877 75%, #D7D0C877),
           linear-gradient(60deg, #D7D0C877 25%, transparent 25.5%, transparent 75%, #D7D0C877 75%, #D7D0C877);
          --spades: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3e%3cpolygon points='25,5 5,45 45,45' fill='none' stroke='%23ffffff' stroke-width='3' /%3e%3c/svg%3e");
          --clubs: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3e%3ccircle cx='25' cy='15' r='8' fill='none' stroke='%23ffffff' stroke-width='3'/%3e%3ccircle cx='13.5' cy='35' r='8' fill='none' stroke='%23ffffff' stroke-width='3'/%3e%3ccircle cx='36.5' cy='35' r='8' fill='none' stroke='%23ffffff' stroke-width='3'/%3e%3c/svg%3e");
          --diamonds: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3e%3cpolygon points='25,5 45,25 25,45 5,25' fill='none' stroke='%23e04633' stroke-width='3' /%3e%3c/svg%3e");
          --hearts: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3e%3cpolygon points='25,45 5,5 45,5' fill='none' stroke='%23e04633' stroke-width='3' /%3e%3c/svg%3e");
          --joker: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3cpath d='M87.72,57.93c0,2.78-2.26,5.04-5.04,5.04s-5.03-2.26-5.03-5.04c0-.43,.05-.85,.16-1.25l-7.79-1.9h-.42c.46,1.79,.71,3.68,.71,5.64,0,11.23-11.01,20.33-18.07,20.33s-18.07-9.1-18.07-20.33c0-1.96,.24-3.85,.71-5.64h-.21l-8.08,1.97c.09,.38,.14,.77,.14,1.18,0,2.78-2.25,5.04-5.03,5.04s-5.04-2.26-5.04-5.04,2.25-5.03,5.04-5.03c.98,0,1.89,.28,2.66,.76l6.54-11.52c2.11-3.7,7.06-4.59,10.32-1.84l2.51,2.1,.06,.06h.01l.11,.09,.12-.22,5.62-10.77c-1.65-.83-2.78-2.53-2.78-4.5,0-2.78,2.26-5.04,5.04-5.04s5.03,2.26,5.03,5.04c0,1.87-1.01,3.5-2.52,4.37l6.2,10.99,.1,.19,.1-.08,2.65-2.23c3.26-2.75,8.22-1.86,10.32,1.84l6.46,11.38c.72-.39,1.55-.62,2.43-.62,2.78,0,5.04,2.25,5.04,5.03Z' style='fill: none; stroke: %23fff; stroke-miterlimit: 10; stroke-width: 2px;'/%3e%3c/svg%3e");
          --w: min(30vmin, 250px);
          --h: calc(var(--w) * 1.4);
          --dark: #2e3034;
          --red: #e04633;
        }
        
        body {
          display: grid;
          place-items: center;
          min-height: 100vh;
          perspective: 1000px;
          overflow: hidden;
          background-color: #9dffe7;
          background-image: var(--body-bi);
          background-size: 34px 60px;
          background-position: 0 0, 0 0, 17px 30px, 17px 30px, 0 0, 17px 30px;
        }
        
        body * {
          box-sizing: border-box;
          transform-style: preserve-3d;
          font-family: "Heebo", sans-serif;
        }
        
        input {
          position: absolute;
          top: 0;
          left: 0;
          clip: rect(0, 0, 0, 0);
          width: 1px;
          height: 1px;
          opacity: 0;
        }
        
        label {
          cursor: pointer;
          padding: 10px;
          width: 44px;
          height: 44px;
          margin-right: 5px;
          margin-bottom: 5px;
          border-radius: 22px;
          display: grid;
          place-items: center;
          background: var(--dark);
          color: white;
          font-weight: 400;
          box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
          user-select: none;
        }
        
        label.play {
          background: var(--red);
          border-radius: 4px;
        }
        
        [data-animation] {
          animation: var(--animn, fall) var(--animdur, 40s) var(--animtf, ease-in) var(--animdel, 0s) var(--animic, 1) var(--animdir, normal) var(--animfm, forwards) var(--animps, paused);
        }
        
        .controls {
          grid-area: 1/span 2;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
        }
        
        .grid {
          position: absolute;
          display: grid;
          grid-template: auto var(--h)/var(--w) var(--w);
          gap: 3vmin;
        }
        
        .deck {
          width: var(--w);
          height: var(--h);
        }
        
        .card {
          position: absolute;
          width: var(--w);
          height: var(--h);
          border-radius: 1vmin;
          display: grid;
          place-items: center;
          font-size: 10vmin;
          color: white;
          background-color: var(--dark);
          border: 2px solid #06070a;
          font-weight: 100;
          box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.2);
        }
        .card::before, .card::after {
          content: "";
          position: absolute;
          inset: 0;
          background: var(--bi) 1vmin 1vmin/2.5vmin no-repeat;
        }
        .card::after {
          transform: rotate(180deg);
        }
        .card.joker {
          background: var(--dark) var(--joker) center/15vmin no-repeat;
        }
        .card.back {
          background: white;
          box-shadow: none;
          border: none;
          opacity: 0.5;
        }
        .card.spades {
          --bi: var(--spades);
        }
        .card.clubs {
          --bi: var(--clubs);
        }
        .card.diamonds {
          --bi: var(--diamonds);
        }
        .card.hearts {
          --bi: var(--hearts);
        }
        
        #play:checked ~ .grid .card {
          --animps: running ;
        }
        
        #play:checked ~ .grid label {
          pointer-events: none;
          background: lightgrey;
        }
        
        #r5:checked ~ .grid .card {
          --animdel: -35s ;
        }
        
        #r10:checked ~ .grid .card {
          --animdel: -30s ;
        }
        
        #r15:checked ~ .grid .card {
          --animdel: -25s ;
        }
        
        #r20:checked ~ .grid .card {
          --animdel: -20s ;
        }
        
        #r25:checked ~ .grid .card {
          --animdel: -15s ;
        }
        
        #r30:checked ~ .grid .card {
          --animdel: -10s ;
        }
        
        #r35:checked ~ .grid .card {
          --animdel: -5s ;
        }
        
        #r40:checked ~ .grid .card {
          --animdel: 0s ;
        }
        
        #r5:checked ~ .grid .r5,
        #r10:checked ~ .grid .r10,
        #r15:checked ~ .grid .r15,
        #r20:checked ~ .grid .r20,
        #r25:checked ~ .grid .r25,
        #r30:checked ~ .grid .r30,
        #r35:checked ~ .grid .r35,
        #r40:checked ~ .grid .r40 {
          background-color: #F4C95D;
          color: var(--dark);
        }
        
        .sec-1 {
          --animn: fall-40 ;
        }
        
        .sec-2 {
          --animn: fall-39 ;
        }
        
        .sec-3 {
          --animn: fall-38 ;
        }
        
        .sec-4 {
          --animn: fall-37 ;
        }
        
        .sec-5 {
          --animn: fall-36 ;
        }
        
        .sec-6 {
          --animn: fall-35 ;
        }
        
        .sec-7 {
          --animn: fall-34 ;
        }
        
        .sec-8 {
          --animn: fall-33 ;
        }
        
        .sec-9 {
          --animn: fall-32 ;
        }
        
        .sec-10 {
          --animn: fall-31 ;
        }
        
        .sec-11 {
          --animn: fall-30 ;
        }
        
        .sec-12 {
          --animn: fall-29 ;
        }
        
        .sec-13 {
          --animn: fall-28 ;
        }
        
        .sec-14 {
          --animn: fall-27 ;
        }
        
        .sec-15 {
          --animn: fall-26 ;
        }
        
        .sec-16 {
          --animn: fall-25 ;
        }
        
        .sec-17 {
          --animn: fall-24 ;
        }
        
        .sec-18 {
          --animn: fall-23 ;
        }
        
        .sec-19 {
          --animn: fall-22 ;
        }
        
        .sec-20 {
          --animn: fall-21 ;
        }
        
        .sec-21 {
          --animn: fall-20 ;
        }
        
        .sec-22 {
          --animn: fall-19 ;
        }
        
        .sec-23 {
          --animn: fall-18 ;
        }
        
        .sec-24 {
          --animn: fall-17 ;
        }
        
        .sec-25 {
          --animn: fall-16 ;
        }
        
        .sec-26 {
          --animn: fall-15 ;
        }
        
        .sec-27 {
          --animn: fall-14 ;
        }
        
        .sec-28 {
          --animn: fall-13 ;
        }
        
        .sec-29 {
          --animn: fall-12 ;
        }
        
        .sec-30 {
          --animn: fall-11 ;
        }
        
        .sec-31 {
          --animn: fall-10 ;
        }
        
        .sec-32 {
          --animn: fall-9 ;
        }
        
        .sec-33 {
          --animn: fall-8 ;
        }
        
        .sec-34 {
          --animn: fall-7 ;
        }
        
        .sec-35 {
          --animn: fall-6 ;
        }
        
        .sec-36 {
          --animn: fall-5 ;
        }
        
        .sec-37 {
          --animn: fall-4 ;
        }
        
        .sec-38 {
          --animn: fall-3 ;
        }
        
        .sec-39 {
          --animn: fall-2 ;
        }
        
        .sec-40 {
          --animn: fall-1 ;
        }
        
        @keyframes fall-1 {
          0% {
            transform: translatey(0);
          }
          1.25%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-2 {
          2.5% {
            transform: translatey(0);
          }
          3.75%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-3 {
          5% {
            transform: translatey(0);
          }
          6.25%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-4 {
          7.5% {
            transform: translatey(0);
          }
          8.75%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-5 {
          10% {
            transform: translatey(0);
          }
          11.25%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-6 {
          12.5% {
            transform: translatey(0);
          }
          13.75%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-7 {
          15% {
            transform: translatey(0);
          }
          16.25%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-8 {
          17.5% {
            transform: translatey(0);
          }
          18.75%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-9 {
          20% {
            transform: translatey(0);
          }
          21.25%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-10 {
          22.5% {
            transform: translatey(0);
          }
          23.75%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-11 {
          25% {
            transform: translatey(0);
          }
          26.25%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-12 {
          27.5% {
            transform: translatey(0);
          }
          28.75%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-13 {
          30% {
            transform: translatey(0);
          }
          31.25%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-14 {
          32.5% {
            transform: translatey(0);
          }
          33.75%, 100% {
            transform: translatey(100vh) rotatez(var(--rz));
          }
        }
        @keyframes fall-15 {
          35% {
            transform: translatey(.........完整代码请登录后点击上方下载按钮下载查看