Stark Minimal Footer

在云境TS 中打开并复制 →

内容预览

--- Build a **Site Footer** for an aerospace company called "EngineTech." This is a black-background footer with an animated dotted top border, a four-column nav grid with a large heading, an oversized wordmark brand row, and a legal line. --- ## ROOT CONTAINER (`.site-footer`) - Position relative, z-index 100, overflow hidden. - Background: `#000000`. Color: `#ffffff`. --- ## ANIMATED DOTS STRIP (`.footer-dots`) A decorative band at the very top of the footer with horizontally drifting dots. - Position relative, height 120px, overflow hidden, background `#000000`. - Has `aria-hidden="true"`. **Inside (`.footer-dots__line`):** - Position absolute, `left: 0; top: 50%`. Width **200%**, height 70px. - Opacity 0.75. `transform: translateY(-50%)`. - Background-image (three layered radial-gradient dot patterns): - `radial-gradient(circle, rgb(255 255 255 / 0.55) 1.5px, transparent 2px)` - `radial-gradient(circle, rgb(255 255 255 / 0.35) 1px, transparent 1.5px)` - `radial-gradient(circle, rgb(255 255 255 / 0.45) 1.2px, transparent 1.8px)` - Background-position: `0 8px, 24px 22px, 48px 14px`. - Background-size: `72px 38px, 110px 44px, 160px 52px`. - Animation: `footerDotsMove 18s linear infinite`. **Keyframes:** ``` @keyframes footerDotsMove { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(-50%, -50%, 0); } } ``` --- ## FOOTER INNER (`.site-footer__inner`) - Width: `min(100% - 96px, var(--hero-max-width))` where `--hero-max-width: 1820px`. Margin `0 auto`. -

……（完整源码请在站内查看）