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(--da.........完整代码请登录后点击上方下载按钮下载查看