Caselle di controllo CSS animate con SVG e JavaScript

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

10 December 2024

Buon Albero di Natale!

HTML

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

<div class="wrap">
  <h1>Animated Checkboxes</h1>
  <p>Four styles: SVG stroke-draw, pill toggle, morph pop (with full checkmark), and a JS burst.</p>

<div class="grid">
    
    <div class="card">
      <div class="label">
        <label class="chk-svg">
          <input id="svg1" type="checkbox" />
          <span class="svg-box" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none">
              <rect x="2.5" y="2.5" width="19" height="19" rx="4" class="box-stroke"></rect>
              <path class="check" d="M6.5 12.3 L10.2 15.8 L17.5 8.5" />
            </svg>
          </span>
        </label>
        <div>
          <strong>Stroke draw</strong>
          <small class="hint">Checkmark drawn with SVG stroke.</small>
        </div>
      </div>
    </div>

<div class="card">
      <div class="label" style="gap:18px">
        <label class="toggle">
          <input id="toggle1" type="checkbox" />
          <span class="knob"></span>
          <span class="bg"></span>
        </label>
        <div>
          <strong>Toggle pill</strong>
          <small class="hint">Mobile-style on/off switch.</small>
        </div>
      </div>
    </div>

<div class="card">
      <div class="label">
        <label class="morph">
          <input id="morph1" type="checkbox" />
          <span class="tile">
            <svg class="tick" viewBox="0 0 24 24" fill="none" stroke="var(--success)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
              <path d="M5 12.5 L10 17.5 L19 7.5"></path>
            </svg>
          </span>
        </label>
        <div>
          <strong>Morph pop</strong>
          <small class="hint">Full checkmark with pop effect.</small>
        </div>
      </div>
    </div>

<div class="card">
      <div class="label">
        <label style="display:inline-flex;align-items:center;gap:12px;cursor:pointer;position:relative;overflow:hidden">
          <input id="jsCheck" type="checkbox" />
          <svg id="burst" width="26" height="26" viewBox="0 0 24 24" style="overflow:visible">
            <rect id="jsRect" x="2.5" y="2.5" width="19" height="19" rx="5" fill="transparent" stroke="rgba(255,255,255,0.08)" stroke-width="2"></rect>
            <path id="jsPath" d="M6.5 12.3 L10.2 15.8 L17.5 8.5" fill="none" stroke="transparent" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
          </svg>
          <div>
            <strong>JS burst</strong>
            <small class="hint">Uses anime.js for extra pop.</small>
          </div>
        </label>
      </div>
    </div>
  </div>

<footer>Responsive, mobile-friendly.</footer>
</div>

CSS

:root {
  --bg: #0f1724;
  --muted: #9aa4b2;
  --accent: #38bdf8; /* cyan */
  --success: #34d399; /* green */
  --size: 22px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: linear-gradient(180deg, #071026 0%, #0b1220 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e6eef6;
  padding: 32px;
  box-sizing: border-box;
}

.wrap {
  width: min(980px, 96%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.01)
  );
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
}
h1 {
  margin: 0 0 18px;
  font-size: 20px;
}
p {
  margin: 0 0 18px;
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  align-items: start;
}

.card {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 16px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.label {
  display: flex;
  gap: 12px;
  align-items: center;

user-select: none;
  position: relative;
  overflow: hidden;
}
.label small {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

/* Ripple effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple 600ms linear;
  pointer-events: none;
  z-index: 0;
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.svg-box {
  cursor: pointer;
}

/* --------------------------
       STYLE 1 - SVG stroke draw
       -------------------------- */
.chk-svg {
  --s: var(--size);
  width: calc(var(--s) * 1.4);
  height: calc(var(--s) * 1.4);
  display: inline-grid;
  place-items: center;
  position: relative;
}
.chk-svg input {
  display: none;
}
.svg-box {
  width: calc(var(--s) * 1.1);
  height: calc(var(--s) * 1.1);
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  transition: all 0.22s ease;
}
.svg-box svg {
  width: calc(var(--s) * 0.7);
  height: calc(var(--s) * 0.7);
}
.svg-box .check {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
    transform 0.28s;
  transform-origin: center;
}
.svg-box .box-stroke {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 2;
  fill: none;
}
.chk-svg input:checked + .svg-box {
  border-color: rgba(56, 189, 248, 0.6);
  background: linear-gradient(
    180deg,
    rgba(56, 189, 248, 0.06),
    rgba(56, 189, 248, 0.03)
  );
  transform: translateY(-1px);
}
.chk-svg input:checked + .svg-box .check {
  stroke-dashoffset: 0;
  transform: scale(1.02);
}

/* --------------------------
       STYLE 2 - Toggle pill
       -------------------------- */
.toggle {
  --w: 56px;
  --h: 30px;
  width: var(--w);
  height: var(--h);
  position: relative;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  display: inline-block;
  transition: background 0.25s;
}
.toggle input {
  display: none;
}
.toggle .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(var(--h) - 6px);
  height: calc(var(--h) - 6px);
  border-radius: 50%;
  background: #fff;
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.toggle input:checked + .knob {
  transform: translateX(calc(var(--w) - var(--h)));
}
.toggle input:checked ~ .bg {
  background: linear-gradient(
    90deg,
    rgba(52, 211, 153, 0.18),
    rgba(56, 189, 248, 0.12)
  );
}
.toggle .bg {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  transition: background 0.25s;
}

/* --------------------------
       STYLE 3 - Morphing full checkmark
       -------------------------- */
.morph {
  --s: var(--size);
  width: calc(var(--s) * 1.4);
  height: calc(var(--s) * 1.4);
  display: inline-grid;
  place-items: center;
}
.morph input {
  display: none;
}
.morph .tile {
  width: calc(var(--s) * 1);
  height: calc(var(--s) * 1);
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  transition: all 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.morph .tick {
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.28s, opacity 0.2s;
}
.morph input:checked + .tile {
  border-color: rgba(52, 211, 153, 0.95);
  background: linear-gradient(
    180deg,
    rgba(52, 211, 153, 0.12),
    rgba(52, 211, 153, 0.06)
  );
  transform: scale(1.04);
}
.morph input:checked + .tile .tick {
  opacity: 1;
  transform: scale(1);
}

.hint {
  font-size: 13px;
  color: var(--muted);
}
footer {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}

/* --------------------------
       MOBILE STYLES
       -------------------------- */
@media (max-width: 600px) {
  :root {
    --size: 28px;
  }
  body {
    padding: 16px;
  }
  .wrap {
    padding: 20px;
  }
  h1 {
    font-size: 22px;
  }
  p {
    font-size: 15px;
  }
  .grid {
    gap: 22px;
  }
  .card {
    padding: 20px;
  }
  .label {
    gap: 16px;
  }
  .label small {
    font-size: 14px;
  }
}

JS

document.querySelectorAll(".label, label").forEach((el) => {
  el.addEventListener("click", function (e) {
    const input = el.querySelector('input[type="checkbox"]');
    if (!input) return;

const rect = el.getBoundingClientRect();
    const ripple = document.createElement("span");
    ripple.className = "ripple";

// Detect style type by class
    let accent = "rgba(56,189,248,0.4)"; // default cyan
    if (el.closest(".morph")) accent = "rgba(52,211,153,0.4)"; // green
    if (el.closest(".toggle")) accent = "rgba(56,189,248,0.35)"; // teal/cyan
    if (el.closest(".chk-svg")) accent = "rgba(56,189,248,0.4)"; // blue
    // JS burst falls back to default cyan

// Color depending on current state
    ripple.style.background = input.checked
      ? "rgba(255,255,255,0.3)" // turning OFF
      : accent; // turning ON

ripple.style.left = e.clientX - rect.left + "px";
    ripple.style.top = e.clientY - rect.top + "px";

el.appendChild(ripple);
    setTimeout(() => ripple.remove(), 600);
  });
});

// JS burst animation
(function () {
  const cb = document.getElementById("jsCheck");
  const rect = document.getElementById("jsRect");
  const path = document.getElementById("jsPath");
  const len = path.getTotalLength ? path.getTotalLength() : 20;
  path.style.strokeDasharray = len;
  path.style.strokeDashoffset = len;
  path.style.stroke = "var(--accent)";
  cb.addEventListener("change", () => {
    if (cb.checked) {
      anime
        .timeline({ easing: "easeOutQuad" })
        .add({
          targets: rect,
          stroke: ["rgba(255,255,255,0.08)", "rgba(56,189,248,0.9)"],
          duration: 220
        })
        .add({
          targets: rect,
          scale: [1, 1.06, 1],
          duration: 300,
          offset: "-=180"
        })
        .add({
          targets: path,
          strokeDashoffset: [len, 0],
          duration: 260,
          offset: "-=220"
        });
    } else {
      anime({
        targets: path,
        strokeDashoffset: [0, len],
        duration: 180,
        easing: "easeInQuad"
      });
      anime({
        targets: rect,
        stroke: ["rgba(56,189,248,0.9)", "rgba(255,255,255,0.08)"],
        duration: 220,
        easing: "easeInQuad"
      });
    }
  });
})();

Caselle di controllo CSS animate con SVG e JavaScript

Consigliato

Un codice di agilecloud61

Un codice di Skyrreum

Buon Albero di Natale!

HTML

CSS

JS

Consigliato

Un codice di agilecloud61

Un codice di Skyrreum

Buon Albero di Natale!

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS