Amour – animation cœur et lettre “Je t’aime” pour la Saint-Valentin

72 0 Animations codex Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Amour – animation cœur et lettre “Je t’aime” pour la Saint-Valentin

Recommandé

29 October 2026

Site web moderne de portail de jeux vidéo, développé en HTML et CSS.

26 March 2025

Formulaire en plusieurs étapes avec barre de progression utilisant jQuery et CSS3

14 September 2024

Animation de la ligne de fréquence cardiaque

HTML

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { background: radial-gradient(circle at 50% 40%, #4a0d24, #14020a 70%); font-family: "Georgia", serif; color: #fff; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
.card { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6vh; gap: 14px; }
.env { position: relative; width: min(340px, 86vw); height: 210px; background: #f5c6d6; border-radius: 0 0 10px 10px; cursor: pointer; box-shadow: 0 20px 50px rgba(0,0,0,.5); transition: transform .6s; }
.env::before { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(to top right, #f0b1c6 50%, transparent 50%) left / 50% 100% no-repeat, linear-gradient(to top left, #f0b1c6 50%, transparent 50%) right / 50% 100% no-repeat; border-radius: 0 0 10px 10px; pointer-events: none; }
.flap { position: absolute; top: 0; left: 0; right: 0; height: 120px; z-index: 4; transform-origin: top; transition: transform .6s, z-index 0s .3s; background: linear-gradient(to bottom, #e89ab4 0, #e89ab4 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.env.open .flap { transform: rotateX(180deg); z-index: 1; }
.letter { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 190px; z-index: 2; background: #fffaf2; color: #7a1335; border-radius: 8px; padding: 18px; text-align: center; transition: transform .8s .5s, height .8s .5s; overflow: hidden; }
.env.open .letter { transform: translateY(-260px); height: 330px; }
.letter h1 { font-size: 1.7rem; font-style: italic; margin-bottom: 10px; }
.letter p { line-height: 1.55; font-size: .98rem; }
.ask { margin-top: 18px; font-weight: bold; }
.btns { display: flex; gap: 12px; justify-content: center; margin-top: 10px; position: relative; min-height: 44px; }
.btns button { font: inherit; border: 0; border-radius: 99px; padding: 10px 22px; cursor: pointer; transition: transform .2s; }
#yes { background: #e11d48; color: #fff; } #no { background: #eee; color: #555; position: relative; }
.tap { opacity: .8; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }

// Love heart animation: beating particle heart, falling hearts, love letter envelope & "Will you be my Valentine?"
// Personalize: add ?to=Sara to the URL
var to = new URLSearchParams(location.search).get('to');
if (to) document.getElementById('to').textContent = 'For ' + to + ' ❤️';
var cv = document.getElementById('c'), ctx = cv.getContext('2d'), W, H, t = 0, pts = [], fall = [], boom = [];
function resize() { var d = window.devicePixelRatio || 1; W = innerWidth; H = innerHeight; cv.width = W * d; cv.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0); build(); }
function heartXY(a) { return [16 * Math.pow(Math.sin(a), 3), -(13 * Math.cos(a) - 5 * Math.cos(2 * a) - 2 * Math.cos(3 * a) - Math.cos(4 * a))]; }
function build() {
  pts = [];
  for (var i = 0; i < 900; i++) {
    var a = Math.random() * Math.PI * 2, xy = heartXY(a), k = Math.random() < .7 ? 1 : Math.pow(Math.random(), .5);
    pts.push({ x: xy[0] * k, y: xy[1] * k, s: Math.random() * 1.8 + .6, p: Math.random() * 6 });
  }
}
addEventListener('resize', resize); resize();
function drawHeart(x, y, s, col) {
  ctx.fillStyle = col; ctx.beginPath(); ctx.moveTo(x, y + s * .3);
  ctx.bezierCurveTo(x, y, x - s / 2, y - s * .1, x - s / 2, y + s * .3); ctx.bezierCurveTo(x - s / 2, y + s * .6, x, y + s * .8, x, y + s);
  ctx.bezierCurveTo(x, y + s * .8, x + s / 2, y + s * .6, x + s / 2, y + s * .3); ctx.bezierCurveTo(x + s / 2, y - s * .1, x, y, x, y + s * .3); ctx.fill();
}
function loop() {
  t += 1 / 60;
  ctx.clearRect(0, 0, W, H);
  var beat = 1 + .08 * Math.pow(Math.sin(t * 3.2), 12) + .04 * Math.pow(Math.sin(t * 3.2 + .4), 12);
  var S = Math.min(W, H * .6) / 40 * beat, cx = W / 2, cy = H * .33;
  ctx.globalCompositeOperation = 'lighter';
  pts.forEach(function (p) {
    var j = Math.sin(t * 2 + p.p) * .3, x = cx + (p.x + j) * S, y = cy + (p.y + j) * S;
    ctx.fillStyle = 'rgba(255,' + (60 + (p.p * 20 | 0)) + ',120,.8)'; ctx.fillRect(x, y, p.s, p.s);
  });
  var g = ctx.createRadialGradient(cx, cy, 0, cx, cy, S * 18); g.addColorStop(0, 'rgba(255,40,100,.25)'); g.addColorStop(1, 'transparent');
  ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
  ctx.globalCompositeOperation = 'source-over';
  if (Math.random() < .12) fall.push({ x: Math.random() * W, y: -20, s: 8 + Math.random() * 14, v: .6 + Math.random() * 1.2, w: Math.random() * 6 });
  fall.forEach(function (f) { f.y += f.v; f.x += Math.sin(t + f.w) * .5; drawHeart(f.x, f.y, f.s, 'rgba(255,105,150,.55)'); });
  fall = fall.filter(function (f) { return f.y < H + 30; });
  boom.forEach(function (b) { b.x += b.vx; b.y += b.vy; b.vy += .12; b.l -= .012; drawHeart(b.x, b.y, b.s, 'rgba(255,' + b.g + ',140,' + Math.max(0, b.l) + ')'); });
  boom = boom.filter(function (b) { return b.l > 0; });
  requestAnimationFrame(loop);
}
loop();
var env = document.getElementById('env');
env.onclick = function (e) { if (e.target.tagName === 'BUTTON') return; env.classList.add('open'); document.getElementById('tap').style.visibility = 'hidden'; };
var no = document.getElementById('no'), yesScale = 1;
function dodge() { no.style.transform = 'translate(' + (Math.random() * 160 - 80) + 'px,' + (Math.random() * 60 - 30) + 'px)'; yesScale += .15; document.getElementById('yes').style.transform = 'scale(' + yesScale + ')'; }
no.addEventListener('mouseenter', dodge); no.addEventListener('click', function (e) { e.preventDefault(); dodge(); });
document.getElementById('yes').onclick = function () {
  document.querySelector('.ask').innerHTML = 'Yaaay! 💖 I knew it! 🥰';
  for (var i = 0; i < 120; i++) boom.push({ x: W / 2, y: H / 2, vx: (Math.random() - .5) * 14, vy: (Math.random() - 1) * 10, s: 10 + Math.random() * 16, l: 1, g: 40 + Math.random() * 120 | 0 });
};

Comments 0

…