Created
April 30, 2026 10:56
-
-
Save carddass2018-svg/7aeff5420973d82e67bc16da073bc360 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="zh-Hant"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>龍珠閃卡 - iPhone 修正版</title> | |
| <style> | |
| body { background: #000; margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: sans-serif; } | |
| /* 啟動按鈕 */ | |
| #auth-overlay { position: fixed; inset: 0; background: #000; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; } | |
| #auth-btn { background: #f1c40f; border: none; padding: 20px 40px; border-radius: 12px; font-size: 20px; font-weight: bold; } | |
| /* 設定面板 */ | |
| #settings-btn { position: fixed; top: 15px; left: 15px; z-index: 1000; background: rgba(0,0,0,0.7); color: #fff; border: 1px solid #555; padding: 10px; border-radius: 8px; display: none; } | |
| .panel { position: fixed; top: 0; left: 0; width: 100%; background: #111; padding: 20px; border-bottom: 2px solid #333; z-index: 999; box-sizing: border-box; transform: translateY(-100%); transition: 0.3s; color: #fff; } | |
| .panel.active { transform: translateY(0); } | |
| .row { margin-bottom: 15px; font-size: 13px; } | |
| input[type="file"] { width: 100%; margin: 5px 0; color: #0f0; } | |
| /* 卡片展示區 */ | |
| .stage { perspective: 1200px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } | |
| #card { width: 82vw; max-width: 320px; aspect-ratio: 1 / 1.4; position: relative; border-radius: 18px; overflow: hidden; background: #111; } | |
| .layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } | |
| #c-base { width: 100%; height: 100%; object-fit: cover; z-index: 1; } | |
| /* iPhone 核心修正：遮罩層 */ | |
| #foil-wrap { | |
| z-index: 2; | |
| mix-blend-mode: color-dodge; | |
| -webkit-mask-size: 100% 100%; | |
| mask-size: 100% 100%; | |
| -webkit-mask-repeat: no-repeat; | |
| mask-repeat: no-repeat; | |
| /* 解決黑位漏光：強制切斷灰色 */ | |
| filter: contrast(500%) brightness(100%); | |
| } | |
| #c-foil { background-size: cover; background-position: center; opacity: 0.15; will-change: filter, opacity; } | |
| #c-shine { z-index: 3; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%); background-size: 250% 250%; mix-blend-mode: overlay; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="auth-overlay"> | |
| <button id="auth-btn" onclick="initMotion()">啟動 iPhone 閃卡效果</button> | |
| </div> | |
| <button id="settings-btn" onclick="document.getElementById('ui-panel').classList.toggle('active')">⚙️ 設定</button> | |
| <div class="panel" id="ui-panel"> | |
| <div class="row">1. 原圖: <input type="file" onchange="ld(event,'b')"></div> | |
| <div class="row">2. 遮罩: <input type="file" onchange="ld(event,'m')"></div> | |
| <div class="row">3. 閃紋: <input type="file" onchange="ld(event,'f')"></div> | |
| <button onclick="document.getElementById('ui-panel').classList.remove('active')" style="width:100%; padding:10px;">完成</button> | |
| </div> | |
| <div class="stage"> | |
| <div id="card"> | |
| <img id="c-base" src="https://asobi-center.com"> | |
| <div id="foil-wrap" class="layer"> | |
| <div id="c-foil" class="layer"></div> | |
| </div> | |
| <div id="c-shine" class="layer"></div> | |
| </div> | |
| </div> | |
| <script> | |
| const foil = document.getElementById('c-foil'); | |
| const wrap = document.getElementById('foil-wrap'); | |
| const base = document.getElementById('c-base'); | |
| const shine = document.getElementById('c-shine'); | |
| function ld(event, type) { | |
| const file = event.target.files[0]; | |
| if (!file) return; | |
| const reader = new FileReader(); | |
| reader.onload = (e) => { | |
| const res = e.target.result; | |
| if(type==='b') base.src = res; | |
| if(type==='f') foil.style.backgroundImage = `url('${res}')`; | |
| if(type==='m') { | |
| // iPhone 必須同時重設 webkit 屬性 | |
| wrap.style.webkitMaskImage = `url('${res}')`; | |
| wrap.style.maskImage = `url('${res}')`; | |
| } | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| function initMotion() { | |
| if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') { | |
| DeviceOrientationEvent.requestPermission() | |
| .then(res => { | |
| if (res === 'granted') startApp(); | |
| else alert('請允許感應器取用權限'); | |
| }) | |
| .catch(err => alert('必須在 HTTPS 網址下才能啟動')); | |
| } else { | |
| startApp(); | |
| } | |
| } | |
| function startApp() { | |
| document.getElementById('auth-overlay').style.display = 'none'; | |
| document.getElementById('settings-btn').style.display = 'block'; | |
| window.addEventListener('deviceorientation', handleMotion); | |
| } | |
| let ticking = false; | |
| function handleMotion(e) { | |
| if (!ticking) { | |
| window.requestAnimationFrame(() => { | |
| let lr = e.gamma || 0; | |
| let fb = (e.beta || 45) - 45; | |
| // 變色與閃爍 | |
| foil.style.filter = `hue-rotate(${lr * 10}deg) brightness(${0.9 + Math.abs(lr)/60}) contrast(1.5)`; | |
| foil.style.opacity = Math.min(0.12 + (Math.abs(lr)/100), 0.6); | |
| // 高光位移 | |
| shine.style.backgroundPosition = `${50 + lr * 2}% ${50 + fb * 2}%`; | |
| ticking = false; | |
| }); | |
| ticking = true; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment