Engraved Certificate
ThreeUI · UI Elements · 免费
在云境TS 中打开并复制 →
内容预览
# Engraved Certificate A responsive engraved certificate: plate field, dual guilloche rosettes, and a drifting harmonic pass that auto-cycles through four cam states. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/engraved-certificate · 预览动画：https://threeui.com/previews/engraved-certificate.webm > 分类：UI Elements /* ===== src/shaders/neuform-isolated/sources/kinetic-lathe-certificate.html (html) ===== */ Kinetic Lathe :root { --ground: #ded6c2; --ground2: #d3cab3; --sheet: #f5efdf; --sheet2: #efe7d3; --ink: #1f3a30; --ink-6: rgba(31, 58, 48, 0.62); --ink-4: rgba(31, 58, 48, 0.44); --rule: rgba(31, 58, 48, 0.22); } * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: radial-gradient(118% 92% at 50% 0%, #e6dfcd 0%, var(--ground) 52%, var(--ground2) 100%); color: var(--ink); font-family: "Cormorant Garamond", Didot, "Times New Roman", serif; -webkit-font-smoothing: antialiased; } main { width: 100%; height: 100%; display: grid; place-items: center; padding: clamp(12px, 3vmin, 28px); } #cert { position: relative; width: min(100%, 720px); aspect-ratio: 1.08 / 1; max-height: min(100%, 720px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.4vmin, 18px); padding: clamp(16px, 4vmin, 36px); border-radius: 3px; background: repeating-linear-gradient(0deg, rgba(31, 58, 48, 0.045) 0 0.5px, transparent 0.5px
……（完整源码请在站内查看）