WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
6805
codex
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
12 July 2025
Datenblüte
12 December 2025
HTML-Struktur des Tic-Tac-Toe-Spiels
HTML
Copy
Animated Menu
CSS
Copy
html { box-sizing: border-box; --bgColorMenu : #1d1d27; --duration: .7s; } html *, html *::before, html *::after { box-sizing: inherit; } body{ margin: 0; display: flex; height: 100vh; overflow: hidden; align-items: center; justify-content: center; background-color: #ffb457; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration); } .menu{ margin: 0; display: flex; /* Works well with 100% width */ width: 32.05em; font-size: 1.5em; padding: 0 2.85em; position: relative; align-items: center; justify-content: center; background-color: var(--bgColorMenu); } .menu__item{ all: unset; flex-grow: 1; z-index: 100; display: flex; cursor: pointer; position: relative; border-radius: 50%; align-items: center; will-change: transform; justify-content: center; padding: 0.55em 0 0.85em; transition: transform var(--timeOut , var(--duration)); } .menu__item::before{ content: ""; z-index: -1; width: 4.2em; height: 4.2em; border-radius: 50%; position: absolute; transform: scale(0); transition: background-color var(--duration), transform var(--duration); } .menu__item.active { transform: translate3d(0, -.8em , 0); } .menu__item.active::before{ transform: scale(1); background-color: var(--bgColorItem); } .icon{ width: 2.6em; height: 2.6em; stroke: white; fill: transparent; stroke-width: 1pt; stroke-miterlimit: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; } .menu__item.active .icon { animation: strok 1.5s reverse; } @keyframes strok { 100% { stroke-dashoffset: 400; } } .menu__border{ left: 0; bottom: 99%; width: 10.9em; height: 2.4em; position: absolute; clip-path: url(#menu); will-change: transform; background-color: var(--bgColorMenu); transition: transform var(--timeOut , var(--duration)); } .svg-container { width: 0; height: 0; } @media screen and (max-width: 50em) { .menu{ font-size: .8em; } }
JS
Copy
"use strict"; const body = document.body; const bgColorsBody = ["#ffb457", "#ff96bd", "#9999fb", "#ffe797", "#cffff1"]; const menu = body.querySelector(".menu"); const menuItems = menu.querySelectorAll(".menu__item"); const menuBorder = menu.querySelector(".menu__border"); let activeItem = menu.querySelector(".active"); function clickItem(item, index) { menu.style.removeProperty("--timeOut"); if (activeItem == item) return; if (activeItem) { activeItem.classList.remove("active"); } item.classList.add("active"); body.style.backgroundColor = bgColorsBody[index]; activeItem = item; offsetMenuBorder(activeItem, menuBorder); } function offsetMenuBorder(element, menuBorder) { const offsetActiveItem = element.getBoundingClientRect(); const left = Math.floor(offsetActiveItem.left - menu.offsetLeft - (menuBorder.offsetWidth - offsetActiveItem.width) / 2) + "px"; menuBorder.style.transform = `translate3d(${left}, 0 , 0)`; } offsetMenuBorder(activeItem, menuBorder); menuItems.forEach((item, index) => { item.addEventListener("click", () => clickItem(item, index)); }) window.addEventListener("resize", () => { offsetMenuBorder(activeItem, menuBorder); menu.style.setProperty("--timeOut", "none"); });