Webleb - Extraits de Code - Carte de paiement

HTML

<!DOCTYPE html>

<head>

<title>3D Payment Card</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&display=swap');

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

font-family: 'Source Code Pro', monospace;

margin: 0;

padding: 20px;

}

.card-container {

perspective: 1000px;

width: 100%;

max-width: 400px;

}

.card {

width: 100%;

height: 240px;

position: relative;

transform-style: preserve-3d;

transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);

cursor: pointer;

}

.card-front, .card-back {

width: 100%;

height: 100%;

position: absolute;

backface-visibility: hidden;

border-radius: 15px;

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

padding: 25px;

box-sizing: border-box;

display: flex;

flex-direction: column;

justify-content: space-between;

color: white;

overflow: hidden;

}

.card-front {

background: linear-gradient(135deg, #1a1a2e, #16213e);

transform: rotateY(0deg);

}

.card-back {

background: linear-gradient(135deg, #16213e, #1a1a2e);

transform: rotateY(180deg);

}

.flipped {

transform: rotateY(180deg);

}

/* Front card styling */

.card-logo {

display: flex;

justify-content: flex-end;

margin-bottom: 20px;

}

.card-logo img {

height: 40px;

}

.card-number {

font-size: 22px;

letter-spacing: 3px;

margin-bottom: 30px;

text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

word-spacing: 8px;

}

.card-details {

display: flex;

justify-content: space-between;

}

.card-holder, .expiry-date {

display: flex;

flex-direction: column;

}

.card-label {

font-size: 10px;

opacity: 0.7;

margin-bottom: 5px;

text-transform: uppercase;

letter-spacing: 1px;

}

.card-value {

font-size: 16px;

letter-spacing: 1px;

}

/* Back card styling */

.card-magnetic-strip {

height: 40px;

background: #000;

margin-top: 20px;

margin-bottom: 15px;

}

.card-signature {

height: 40px;

background: #fff;

border-radius: 4px;

display: flex;

align-items: center;

padding: 0 10px;

color: #333;

font-size: 12px;

position: relative;

margin-bottom: 20px;

}

.card-signature::after {

content: "Authorized Signature - Not Valid Unless Signed";

position: absolute;

right: 10px;

font-size: 6px;

color: #999;

}

.card-cvv {

display: flex;

justify-content: flex-end;

}

.cvv-strip {

background: #fff;

color: #333;

padding: 5px 10px;

border-radius: 3px;

font-size: 14px;

width: 60px;

text-align: center;

}

.card-issuer {

font-size: 10px;

text-align: center;

opacity: 0.7;

margin-top: 10px;

}

/* Holographic effect */

.holographic {

position: absolute;

width: 60px;

height: 40px;

background: linear-gradient(45deg,

rgba(255,255,255,0.1) 0%,

rgba(255,255,255,0.5) 50%,

rgba(255,255,255,0.1) 100%);

border-radius: 5px;

top: 20px;

left: 20px;

opacity: 0.8;

}

/* Contactless symbol */

.contactless {

position: absolute;

right: 25px;

bottom: 25px;

width: 30px;

height: 30px;

background: radial-gradient(circle at center,

rgba(255,255,255,0.8) 0%,

rgba(255,255,255,0.4) 50%,

transparent 70%);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

}

.contactless::before {

content: "⌃";

font-size: 18px;

color: rgba(255,255,255,0.8);

transform: rotate(90deg);

}

</style>

</head>

<body>

</div>

<span class="card-label">Card Holder</span>

</div>

<span class="card-label">Expires</span>

</div>

</div>

</div>

<div class="card-issuer">This card is issued by Example Bank under license from Mastercard International</div>

</div>

// Add slight tilt effect on mouse move

document.querySelector('.card-container').addEventListener('mousemove', (e) => {

const card = e.currentTarget.querySelector('.card');

const cardRect = card.getBoundingClientRect();

const cardCenterX = cardRect.left + cardRect.width / 2;

const cardCenterY = cardRect.top + cardRect.height / 2;

const angleX = (e.clientY - cardCenterY) / 20;

const angleY = (cardCenterX - e.clientX) / 20;

if (!card.classList.contains('flipped')) {

card.style.transform = `rotateY(${angleY}deg) rotateX(${angleX}deg)`;

}

});

// Reset rotation when mouse leaves

document.querySelector('.card-container').addEventListener('mouseleave', (e) => {

const card = e.currentTarget.querySelector('.card');

card.style.transform = 'rotateY(0deg) rotateX(0deg)';

});

</script>

</body>

</html>

Carte de paiement

Recommandé

Bouton BD

livre électronique

Animation de bouton de commande

HTML

CSS

JS

Recommandé

Bouton BD

livre électronique

Animation de bouton de commande

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS