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

Posted 2023-05-08

【中文标题】当用户专注于特定输入时执行 CSS 动画

【英文标题】：Do a CSS animation when user has focus on specific input

【发布时间】：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"   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"   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 输入上时，如何使卡片翻转并在背面保持翻转？

【参考方案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"   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"   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"   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"   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>