当用户专注于特定输入时执行 CSS 动画

【问题标题】：Do a CSS animation when user has focus on specific input当用户专注于特定输入时执行 CSS 动画
【发布时间】：2022-01-04 09:30:53
【问题描述】：

我有一个收集用户信用卡信息的表单。我们将重点关注用于 CVV 的输入：

<input type="text" id="cc_cvv" name="cc_cvv" class="form-control mt-1 block w-full" minlength="3" maxlength="3" pattern="[0-9]+" placeholder="***" required=""/>

我有一张代表用户信用卡信息的翻转卡：

<div class="card mx-auto mt-3">
                                  <div class="flip">
                                    <div class="front">

                                      <svg class="logo" width="40" height="40" viewbox="0 0 17.5 16.2">
                                        {{-- <path d="M3.2 0l5.4 5.6L14.3 0l3.2 3v9L13 16.2V7.8l-4.4 4.1L4.5 8v8.2L0 12V3l3.2-3z" fill="white"></path> --}}
                                      </svg>
                                      <div class="investor">CARD OVERVIEW</div>
                                      <div class="chip">
                                        <div class="chip-line"></div>
                                        <div class="chip-line"></div>
                                        <div class="chip-line"></div>
                                        <div class="chip-line"></div>
                                        <div class="chip-main"></div>
                                      </div>
                                      <svg class="wave" viewBox="0 3.71 26.959 38.787" width="26.959" height="38.787" fill="white">
                                        {{-- <path d="M19.709 3.719c.266.043.5.187.656.406 4.125 5.207 6.594 11.781 6.594 18.938 0 7.156-2.469 13.73-6.594 18.937-.195.336-.57.531-.957.492a.9946.9946 0 0 1-.851-.66c-.129-.367-.035-.777.246-1.051 3.855-4.867 6.156-11.023 6.156-17.718 0-6.696-2.301-12.852-6.156-17.719-.262-.317-.301-.762-.102-1.121.204-.36.602-.559 1.008-.504z"></path>
                                        <path d="M13.74 7.563c.231.039.442.164.594.343 3.508 4.059 5.625 9.371 5.625 15.157 0 5.785-2.113 11.097-5.625 15.156-.363.422-1 .472-1.422.109-.422-.363-.472-1-.109-1.422 3.211-3.711 5.156-8.551 5.156-13.843 0-5.293-1.949-10.133-5.156-13.844-.27-.309-.324-.75-.141-1.114.188-.367.578-.582.985-.542h.093z"></path>
                                        <path d="M7.584 11.438c.227.031.438.144.594.312 2.953 2.863 4.781 6.875 4.781 11.313 0 4.433-1.828 8.449-4.781 11.312-.398.387-1.035.383-1.422-.016-.387-.398-.383-1.035.016-1.421 2.582-2.504 4.187-5.993 4.187-9.875 0-3.883-1.605-7.372-4.187-9.875-.321-.282-.426-.739-.266-1.133.164-.395.559-.641.984-.617h.094zM1.178 15.531c.121.02.238.063.344.125 2.633 1.414 4.437 4.215 4.437 7.407 0 3.195-1.797 5.996-4.437 7.406-.492.258-1.102.07-1.36-.422-.257-.492-.07-1.102.422-1.359 2.012-1.075 3.375-3.176 3.375-5.625 0-2.446-1.371-4.551-3.375-5.625-.441-.204-.676-.692-.551-1.165.122-.468.567-.785 1.051-.742h.094z"></path> --}}
                                      </svg>
                                      <div class="card-number"> 
                                        <div class="section" id="cc_display_number1">****</div>
                                        <div class="section" id="cc_display_number2">****</div>
                                        <div class="section" id="cc_display_number3">****</div>
                                        <div class="section" id="cc_display_number4">****</div>
                                      </div>
                                      <div class="end"><span class="end-text">EXPIRY:</span><span class="end-date"> <span id="cc_display_expiry_month">**</span>/<span id="cc_display_expiry_year">**</span></span></div>
                                      <div class="card-holder" id="cc_display_holder">*********</div>
                                      <div class="master" id="cc_card_type">
                                        {{-- <div class="circle master-red"></div>
                                        <div class="circle master-yellow"></div> --}}
                                      </div>
                                    </div>
                                    <div class="back">
                                      <div class="strip-black"></div>
                                      <div class="ccv">
                                        <label>ccv</label>
                                        <div id="cc_display_cvv">***</div>
                                      </div>
                                      <div class="terms">
                                        <p>This card is artificially created with your real card information. This card is not real and can not be used.</p>
                                        <p>This card can not be used for payment purposes.</p>
                                      </div>
                                    </div>
                                  </div>
                                </div>

以及这张卡片的以下css：

.inspiration {
                position: fixed;
                bottom: 0;
                right: 0;
                padding: 10px;
                text-align: center;
                text-decoration: none;
                font-family: 'Gill Sans', sans-serif;
                font-size: 12px;
                color: #fff;
            }
            .card {
                width: 400px;
                height: 260px;
                border: 0 !important;
            }
            .flip {
                width: inherit;
                height: inherit;
                transition: 0.7s;
                transform-style: preserve-3d;
                -webkit-animation: flip 2.5s ease;
                        animation: flip 2.5s ease;
            }
            .front,
            .back {
                position: absolute;
                width: inherit;
                height: inherit;
                border-radius: 15px;
                color: #fff;
                text-shadow: 0 1px 1px rgba(0,0,0,0.3);
                box-shadow: 0 1px 10px 1px rgba(0,0,0,0.3);
                -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                background-image: linear-gradient(to right, #111, #555);
                overflow: hidden;
            }
            .front {
                transform: translateZ(0);
            }
            .strip-bottom,
            .strip-top {
                position: absolute;
                right: 0;
                height: inherit;
                /* background-image: linear-gradient(to bottom, #ff6767, #ff4545); */
                background-image: linear-gradient(to bottom, #3578fa, #0649cb);
                box-shadow: 0 0 10px 0px rgba(0,0,0,0.5);
                z-index: -1;
            }
            .strip-bottom {
                width: 200px;
                transform: skewX(-15deg) translateX(50px);
            }
            .strip-top {
                width: 180px;
                transform: skewX(20deg) translateX(50px);
            }
            .logo {
                position: absolute;
                top: 30px;
                right: 25px;
            }
            .investor {
                position: relative;
                top: 30px;
                left: 25px;
                text-transform: uppercase;
            }
            .chip {
                position: relative;
                top: 60px;
                left: 25px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 50px;
                height: 40px;
                border-radius: 5px;
                background-image: linear-gradient(to bottom left, #ffecc7, #d0b978);
                overflow: hidden;
            }
            .chip .chip-line {
                position: absolute;
                width: 100%;
                height: 1px;
                background-color: #333;
            }
            .chip .chip-line:nth-child(1) {
                top: 13px;
            }
            .chip .chip-line:nth-child(2) {
                top: 20px;
            }
            .chip .chip-line:nth-child(3) {
                top: 28px;
            }
            .chip .chip-line:nth-child(4) {
                left: 25px;
                width: 1px;
                height: 50px;
            }
            .chip .chip-main {
                width: 20px;
                height: 25px;
                border: 1px solid #333;
                border-radius: 3px;
                background-image: linear-gradient(to bottom left, #efdbab, #e1cb94);
                z-index: 1;
            }
            .wave {
                position: relative;
                top: 20px;
                left: 100px;
            }
            .card-number {
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 40px 25px 10px;
                font-size: 23px;
                font-family: 'cc font', monospace;
            }
            .end {
                margin-left: 25px;
                text-transform: uppercase;
                font-family: 'cc font', monospace;
            }
            .end .end-text {
                font-size: 9px;
                color: rgba(255,255,255,0.8);
            }
            .card-holder {
                margin: 10px 25px;
                text-transform: uppercase;
                font-family: 'cc font', monospace;
            }
            .master {
                position: absolute;
                right: 20px;
                bottom: 20px;
                display: flex;
            }
            .master .circle {
                width: 25px;
                height: 25px;
                border-radius: 50%;
            }
            .master .master-red {
                background-color: #eb001b;
            }
            .master .master-yellow {
                margin-left: -10px;
                background-color: rgba(255,209,0,0.7);
            }
            .card {
                perspective: 1000;
            }
            .card:hover .flip {
                transform: rotateY(180deg);
            }
            .back {
                transform: rotateY(180deg) translateZ(0);
                background: #9e9e9e;
            }
            .back .strip-black {
                position: absolute;
                top: 30px;
                left: 0;
                width: 100%;
                height: 50px;
                background: #000;
            }
            .back .ccv {
                position: absolute;
                top: 110px;
                left: 0;
                right: 0;
                height: 36px;
                width: 90%;
                padding: 10px;
                margin: 0 auto;
                border-radius: 5px;
                text-align: right;
                letter-spacing: 1px;
                color: #000;
                background: #fff;
            }
            .back .ccv label {
                display: block;
                margin: -30px 0 15px;
                font-size: 10px;
                text-transform: uppercase;
                color: #fff;
            }
            .back .terms {
                position: absolute;
                top: 150px;
                padding: 20px;
                font-size: 10px;
                text-align: justify;
            }

当用户的注意力集中在 #cc_cvv 输入上时，如何使卡片翻转并在背面保持翻转？

【问题讨论】：

    标签： html jquery css


    【解决方案1】：

    您可以根据输入的位置使用以下内容：

    #cc_cvv:focus + .card .flip {
  transform: rotateY(180deg);
}

    演示 CSS

    .inspiration {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-family: 'Gill Sans', sans-serif;
  font-size: 12px;
  color: #fff;
}

.card {
  width: 400px;
  height: 260px;
  border: 0 !important;
}


.flip {
  width: inherit;
  height: inherit;
  transition: 0.7s;
  transform-style: preserve-3d;
  -webkit-animation: flip 2.5s ease;
  animation: flip 2.5s ease;
}

.front,
.back {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: 15px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.3);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-image: linear-gradient(to right, #111, #555);
  overflow: hidden;
}

.front {
  transform: translateZ(0);
}

.strip-bottom,
.strip-top {
  position: absolute;
  right: 0;
  height: inherit;
  /* background-image: linear-gradient(to bottom, #ff6767, #ff4545); */
  background-image: linear-gradient(to bottom, #3578fa, #0649cb);
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.strip-bottom {
  width: 200px;
  transform: skewX(-15deg) translateX(50px);
}

.strip-top {
  width: 180px;
  transform: skewX(20deg) translateX(50px);
}

.logo {
  position: absolute;
  top: 30px;
  right: 25px;
}

.investor {
  position: relative;
  top: 30px;
  left: 25px;
  text-transform: uppercase;
}

.chip {
  position: relative;
  top: 60px;
  left: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 40px;
  border-radius: 5px;
  background-image: linear-gradient(to bottom left, #ffecc7, #d0b978);
  overflow: hidden;
}

.chip .chip-line {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #333;
}

.chip .chip-line:nth-child(1) {
  top: 13px;
}

.chip .chip-line:nth-child(2) {
  top: 20px;
}

.chip .chip-line:nth-child(3) {
  top: 28px;
}

.chip .chip-line:nth-child(4) {
  left: 25px;
  width: 1px;
  height: 50px;
}

.chip .chip-main {
  width: 20px;
  height: 25px;
  border: 1px solid #333;
  border-radius: 3px;
  background-image: linear-gradient(to bottom left, #efdbab, #e1cb94);
  z-index: 1;
}

.wave {
  position: relative;
  top: 20px;
  left: 100px;
}

.card-number {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px 25px 10px;
  font-size: 23px;
  font-family: 'cc font', monospace;
}

.end {
  margin-left: 25px;
  text-transform: uppercase;
  font-family: 'cc font', monospace;
}

.end .end-text {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.8);
}

.card-holder {
  margin: 10px 25px;
  text-transform: uppercase;
  font-family: 'cc font', monospace;
}

.master {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
}

.master .circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.master .master-red {
  background-color: #eb001b;
}

.master .master-yellow {
  margin-left: -10px;
  background-color: rgba(255, 209, 0, 0.7);
}

.card {
  perspective: 1000;
}

.card:hover .flip {
  transform: rotateY(180deg);
}


#cc_cvv:focus + .card .flip {
  transform: rotateY(180deg);
}


.back {
  transform: rotateY(180deg) translateZ(0);
  background: #9e9e9e;
}

.back .strip-black {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 50px;
  background: #000;
}

.back .ccv {
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  height: 36px;
  width: 90%;
  padding: 10px;
  margin: 0 auto;
  border-radius: 5px;
  text-align: right;
  letter-spacing: 1px;
  color: #000;
  background: #fff;
}

.back .ccv label {
  display: block;
  margin: -30px 0 15px;
  font-size: 10px;
  text-transform: uppercase;
  color: #fff;
}

.back .terms {
  position: absolute;
  top: 150px;
  padding: 20px;
  font-size: 10px;
  text-align: justify;
}
    <input type="text" id="cc_cvv" name="cc_cvv" class="form-control mt-1 block w-full" minlength="3" maxlength="3" pattern="[0-9]+" placeholder="***" required="" />

<div class="card mx-auto mt-3">
  <div class="flip">
    <div class="front">

      <svg class="logo" width="40" height="40" viewbox="0 0 17.5 16.2">
                                        {{-- <path d="M3.2 0l5.4 5.6L14.3 0l3.2 3v9L13 16.2V7.8l-4.4 4.1L4.5 8v8.2L0 12V3l3.2-3z" fill="white"></path> --}}
                                      </svg>
      <div class="investor">CARD OVERVIEW</div>
      <div class="chip">
        <div class="chip-line"></div>
        <div class="chip-line"></div>
        <div class="chip-line"></div>
        <div class="chip-line"></div>
        <div class="chip-main"></div>
      </div>
      <svg class="wave" viewBox="0 3.71 26.959 38.787" width="26.959" height="38.787" fill="white">
                                        {{-- <path d="M19.709 3.719c.266.043.5.187.656.406 4.125 5.207 6.594 11.781 6.594 18.938 0 7.156-2.469 13.73-6.594 18.937-.195.336-.57.531-.957.492a.9946.9946 0 0 1-.851-.66c-.129-.367-.035-.777.246-1.051 3.855-4.867 6.156-11.023 6.156-17.718 0-6.696-2.301-12.852-6.156-17.719-.262-.317-.301-.762-.102-1.121.204-.36.602-.559 1.008-.504z"></path>
                                        <path d="M13.74 7.563c.231.039.442.164.594.343 3.508 4.059 5.625 9.371 5.625 15.157 0 5.785-2.113 11.097-5.625 15.156-.363.422-1 .472-1.422.109-.422-.363-.472-1-.109-1.422 3.211-3.711 5.156-8.551 5.156-13.843 0-5.293-1.949-10.133-5.156-13.844-.27-.309-.324-.75-.141-1.114.188-.367.578-.582.985-.542h.093z"></path>
                                        <path d="M7.584 11.438c.227.031.438.144.594.312 2.953 2.863 4.781 6.875 4.781 11.313 0 4.433-1.828 8.449-4.781 11.312-.398.387-1.035.383-1.422-.016-.387-.398-.383-1.035.016-1.421 2.582-2.504 4.187-5.993 4.187-9.875 0-3.883-1.605-7.372-4.187-9.875-.321-.282-.426-.739-.266-1.133.164-.395.559-.641.984-.617h.094zM1.178 15.531c.121.02.238.063.344.125 2.633 1.414 4.437 4.215 4.437 7.407 0 3.195-1.797 5.996-4.437 7.406-.492.258-1.102.07-1.36-.422-.257-.492-.07-1.102.422-1.359 2.012-1.075 3.375-3.176 3.375-5.625 0-2.446-1.371-4.551-3.375-5.625-.441-.204-.676-.692-.551-1.165.122-.468.567-.785 1.051-.742h.094z"></path> --}}
                                      </svg>
      <div class="card-number">
        <div class="section" id="cc_display_number1">****</div>
        <div class="section" id="cc_display_number2">****</div>
        <div class="section" id="cc_display_number3">****</div>
        <div class="section" id="cc_display_number4">****</div>
      </div>
      <div class="end"><span class="end-text">EXPIRY:</span><span class="end-date"> <span id="cc_display_expiry_month">**</span>/<span id="cc_display_expiry_year">**</span></span>
      </div>
      <div class="card-holder" id="cc_display_holder">*********</div>
      <div class="master" id="cc_card_type">
        {{--
        <div class="circle master-red"></div>
        <div class="circle master-yellow"></div> --}}
      </div>
    </div>
    <div class="back">
      <div class="strip-black"></div>
      <div class="ccv">
        <label>ccv</label>
        <div id="cc_display_cvv">***</div>
      </div>
      <div class="terms">
        <p>This card is artificially created with your real card information. This card is not real and can not be used.</p>
        <p>This card can not be used for payment purposes.</p>
      </div>
    </div>
  </div>
</div>

    如果输入位于其他地方，那么您可能必须使用 jquery/javascript。

    演示 jquery

    $('#cc_cvv').focus(function() {
  $('.card').addClass("active");
}).blur(function() {
  $('.card').removeClass("active");
})
    .inspiration {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  font-family: 'Gill Sans', sans-serif;
  font-size: 12px;
  color: #fff;
}

.card {
  width: 400px;
  height: 260px;
  border: 0 !important;
}

.flip {
  width: inherit;
  height: inherit;
  transition: 0.7s;
  transform-style: preserve-3d;
  -webkit-animation: flip 2.5s ease;
  animation: flip 2.5s ease;
}

.front,
.back {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: 15px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.3);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-image: linear-gradient(to right, #111, #555);
  overflow: hidden;
}

.front {
  transform: translateZ(0);
}

.strip-bottom,
.strip-top {
  position: absolute;
  right: 0;
  height: inherit;
  /* background-image: linear-gradient(to bottom, #ff6767, #ff4545); */
  background-image: linear-gradient(to bottom, #3578fa, #0649cb);
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.strip-bottom {
  width: 200px;
  transform: skewX(-15deg) translateX(50px);
}

.strip-top {
  width: 180px;
  transform: skewX(20deg) translateX(50px);
}

.logo {
  position: absolute;
  top: 30px;
  right: 25px;
}

.investor {
  position: relative;
  top: 30px;
  left: 25px;
  text-transform: uppercase;
}

.chip {
  position: relative;
  top: 60px;
  left: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 40px;
  border-radius: 5px;
  background-image: linear-gradient(to bottom left, #ffecc7, #d0b978);
  overflow: hidden;
}

.chip .chip-line {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #333;
}

.chip .chip-line:nth-child(1) {
  top: 13px;
}

.chip .chip-line:nth-child(2) {
  top: 20px;
}

.chip .chip-line:nth-child(3) {
  top: 28px;
}

.chip .chip-line:nth-child(4) {
  left: 25px;
  width: 1px;
  height: 50px;
}

.chip .chip-main {
  width: 20px;
  height: 25px;
  border: 1px solid #333;
  border-radius: 3px;
  background-image: linear-gradient(to bottom left, #efdbab, #e1cb94);
  z-index: 1;
}

.wave {
  position: relative;
  top: 20px;
  left: 100px;
}

.card-number {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px 25px 10px;
  font-size: 23px;
  font-family: 'cc font', monospace;
}

.end {
  margin-left: 25px;
  text-transform: uppercase;
  font-family: 'cc font', monospace;
}

.end .end-text {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.8);
}

.card-holder {
  margin: 10px 25px;
  text-transform: uppercase;
  font-family: 'cc font', monospace;
}

.master {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
}

.master .circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.master .master-red {
  background-color: #eb001b;
}

.master .master-yellow {
  margin-left: -10px;
  background-color: rgba(255, 209, 0, 0.7);
}

.card {
  perspective: 1000;
}

.card:hover .flip,
.card.active .flip {
  transform: rotateY(180deg);
}

.back {
  transform: rotateY(180deg) translateZ(0);
  background: #9e9e9e;
}

.back .strip-black {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 50px;
  background: #000;
}

.back .ccv {
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  height: 36px;
  width: 90%;
  padding: 10px;
  margin: 0 auto;
  border-radius: 5px;
  text-align: right;
  letter-spacing: 1px;
  color: #000;
  background: #fff;
}

.back .ccv label {
  display: block;
  margin: -30px 0 15px;
  font-size: 10px;
  text-transform: uppercase;
  color: #fff;
}

.back .terms {
  position: absolute;
  top: 150px;
  padding: 20px;
  font-size: 10px;
  text-align: justify;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="cc_cvv" name="cc_cvv" class="form-control mt-1 block w-full" minlength="3" maxlength="3" pattern="[0-9]+" placeholder="***" required="" />

<div class="card mx-auto mt-3">
  <div class="flip">
    <div class="front">

      <svg class="logo" width="40" height="40" viewbox="0 0 17.5 16.2">
                                        {{-- <path d="M3.2 0l5.4 5.6L14.3 0l3.2 3v9L13 16.2V7.8l-4.4 4.1L4.5 8v8.2L0 12V3l3.2-3z" fill="white"></path> --}}
                                      </svg>
      <div class="investor">CARD OVERVIEW</div>
      <div class="chip">
        <div class="chip-line"></div>
        <div class="chip-line"></div>
        <div class="chip-line"></div>
        <div class="chip-line"></div>
        <div class="chip-main"></div>
      </div>
      <svg class="wave" viewBox="0 3.71 26.959 38.787" width="26.959" height="38.787" fill="white">
                                        {{-- <path d="M19.709 3.719c.266.043.5.187.656.406 4.125 5.207 6.594 11.781 6.594 18.938 0 7.156-2.469 13.73-6.594 18.937-.195.336-.57.531-.957.492a.9946.9946 0 0 1-.851-.66c-.129-.367-.035-.777.246-1.051 3.855-4.867 6.156-11.023 6.156-17.718 0-6.696-2.301-12.852-6.156-17.719-.262-.317-.301-.762-.102-1.121.204-.36.602-.559 1.008-.504z"></path>
                                        <path d="M13.74 7.563c.231.039.442.164.594.343 3.508 4.059 5.625 9.371 5.625 15.157 0 5.785-2.113 11.097-5.625 15.156-.363.422-1 .472-1.422.109-.422-.363-.472-1-.109-1.422 3.211-3.711 5.156-8.551 5.156-13.843 0-5.293-1.949-10.133-5.156-13.844-.27-.309-.324-.75-.141-1.114.188-.367.578-.582.985-.542h.093z"></path>
                                        <path d="M7.584 11.438c.227.031.438.144.594.312 2.953 2.863 4.781 6.875 4.781 11.313 0 4.433-1.828 8.449-4.781 11.312-.398.387-1.035.383-1.422-.016-.387-.398-.383-1.035.016-1.421 2.582-2.504 4.187-5.993 4.187-9.875 0-3.883-1.605-7.372-4.187-9.875-.321-.282-.426-.739-.266-1.133.164-.395.559-.641.984-.617h.094zM1.178 15.531c.121.02.238.063.344.125 2.633 1.414 4.437 4.215 4.437 7.407 0 3.195-1.797 5.996-4.437 7.406-.492.258-1.102.07-1.36-.422-.257-.492-.07-1.102.422-1.359 2.012-1.075 3.375-3.176 3.375-5.625 0-2.446-1.371-4.551-3.375-5.625-.441-.204-.676-.692-.551-1.165.122-.468.567-.785 1.051-.742h.094z"></path> --}}
                                      </svg>
      <div class="card-number">
        <div class="section" id="cc_display_number1">****</div>
        <div class="section" id="cc_display_number2">****</div>
        <div class="section" id="cc_display_number3">****</div>
        <div class="section" id="cc_display_number4">****</div>
      </div>
      <div class="end"><span class="end-text">EXPIRY:</span><span class="end-date"> <span id="cc_display_expiry_month">**</span>/<span id="cc_display_expiry_year">**</span></span>
      </div>
      <div class="card-holder" id="cc_display_holder">*********</div>
      <div class="master" id="cc_card_type">
        {{--
        <div class="circle master-red"></div>
        <div class="circle master-yellow"></div> --}}
      </div>
    </div>
    <div class="back">
      <div class="strip-black"></div>
      <div class="ccv">
        <label>ccv</label>
        <div id="cc_display_cvv">***</div>
      </div>
      <div class="terms">
        <p>This card is artificially created with your real card information. This card is not real and can not be used.</p>
        <p>This card can not be used for payment purposes.</p>
      </div>
    </div>
  </div>
</div>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-11-11
      • 1970-01-01
      • 1970-01-01
      • 2021-10-25
      • 1970-01-01
      • 2019-08-20
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode