Uma animação simples, efeito de virar o cartão da frente para trás, e somente com a ajuda do CSS. Um belo cartão de crédito HTML para o seu projeto.

Design de cartão de crédito

Se você ou seu projeto precisa de um cartão de crédito digital elegante e simples, este projeto é para você.
Aparência agradável, facilidade de edição para atender às suas necessidades. Você pode pegar o código abaixo ou baixar o arquivo de imagens completo.

O código usa apenas HTML e CSS. Nenhum código JS, efeito de flip de cartão de crédito 3D 180 graus na horizontal.
Existem estilos para a frente e para trás do cartão.

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Card</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Josefin Sans', sans-serif;
}
.container{
min-height: 100vh;
width: 100%;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.card{
width: 500px;
height: 300px;
color: #fff;
cursor: pointer;
perspective: 1000px;
}
.card-inner{
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.front, .back{
width: 100%;
height: 100%;
background-image: linear-gradient(45deg, #0045c7, #ff2c7d);
position: absolute;
top: 0;
left: 0;
padding: 20px 30px;
border-radius: 15px;
overflow: hidden;
z-index: 1;
backface-visibility: hidden;
}
.row{
display: flex;
align-items: center;
justify-content: space-between;
}
.map-img{
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.3;
z-index: -1;
}
.card-no{
font-size: 35px;
margin-top: 60px;
}
.card-holder{
font-size: 12px;
margin-top: 40px;
}
.name{
font-size: 22px;
margin-top: 20px;
}
.bar{
background: #222;
margin-left: -30px;
margin-right: -30px;
height: 60px;
margin-top: 10px;
}
.card-cvv{
margin-top: 20px;
}
.card-cvv div{
flex: 1;
}
.card-cvv img{
width: 100%;
display: block;
line-height: 0;
}
.card-cvv p{
background: #fff;
color: #000;
font-size: 22px;
padding: 10px 20px;
}
.card-text{
margin-top: 30px;
font-size: 14px;
}
.signature{
margin-top: 30px;
}
.back{
transform: rotateY(180deg);
}
.card:hover .card-inner{
transform: rotateY(-180deg);
}
</style>
<body>
<div class="container">
 <div class="card">
    <div class="card-inner">
	  <div class="front">
	  <img src="images/map.png" class="map-img">
	    <div class="row">
		     <img src="images/chip.png" width="60px">
			 <img src="images/visa.png" width="80px">
		</div>
		<div class="row card-no">
		 <p>4242</p>
		 <p>4242</p>
		 <p>4242</p>
		 <p>4242</p>
		</div>
		<div class="row card-holder">
		 <p>CARD HOLDER</p>
		 <p>VALID TILL</p>
		</div>
		<div class="row name">
		  <p>JOE ALISON</p>
		  <p>10 / 23</p>
		</div>
	  </div>
	  
	  <div class="back">
	    <img src="images/map.png" class="map-img">
		<div class="bar"></div>
		<div class="row card-cvv">
		 <div>
		    <img src="images/pattern.png">
		 </div>
		 <p>825</p>
		</div>
		<div class="row card-text">
		<p>This is a virtual card design built using HTML and CSS</p>
		</div>
		<div class="row signature">
		 <p>CUSTOMER SIGNATURE</p>
		 <img src="images/visa.png" width="80px">
		</div>
	  </div>
	  
	</div>
 </div>
</div>
</body>
</html>

Deixe sua avaliação:

0 Comments:

Postar um comentário

✱ Atenção! Comentários são bem-vindos neste artigo, mas é importante seguir as seguintes diretrizes para mantermos um ambiente saudável:

1️⃣ Respeite as opiniões e os comentários dos outros participantes.
2️⃣ Evite o uso de palavras ofensivas, linguagem vulgar ou qualquer forma de desrespeito.
3️⃣ Mantenha-se no tópico do artigo ao fazer comentários.
4️⃣ Não compartilhe links externos ou qualquer tipo de spam.
5️⃣ Evite divulgar informações pessoais ou sensíveis nos comentários.

Lembre-se de que a moderação está ativa e comentários que não seguirem estas diretrizes poderão ser excluídos. Agradecemos sua compreensão e contribuição positiva! 💬

domingo, 9 de abril de 2023

Design de cartão de crédito apenas com animação HTML e CSS
Publicado por: Equipe Fury Arquivo verificado! domingo, 9 de abril de 2023