◆42Lab是非盈利性、非官方的云图计划维基百科。 ◆诚邀指挥官们加入编辑部共同建设wiki。点这里加入42Lab ◆如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易! ◆有任何意见、建议、纠错,欢迎在任意评论区评论 ◆编辑讨论QQ群741423564 微博@GFwiki少前百科 欢迎您 |
微件:DollPage/Arma
来自42LAB
查看/隐藏印记属性
<img src="/images/0/0b/Arma-base1b/b5/Arma-base28/8e/Arma-base31/10/Arma-base4f/f7/Arma-base5.svg" width="100%"> <video id="arma-video" width="55%" height="55%" style="left:22.5%;position:absolute;top:22.5%" preload="auto" muted playsinline> <source src="" type="video/webm;codecs=vp9" /> <img src="" alt="武装印记的图片"> </video>
<script> const armaColors = [
['3866be', '3c72d7'], ['b63e44', 'e44951'], ['df8728', 'ffa13d'], ['6953c3', '7963cf'], ['69da79', '60e172']
]; const armaOuter = document.getElementById('arma-outer'),
armaToggle = document.getElementById('arma-toggle'), arma = document.getElementById('arma'), armaVideo = document.getElementById('arma-video'), [armaC1, armaC2] = armaColors[], agent = , armaName = ;
armaVideo.insertAdjacentHTML('beforebegin', `<svg version="1.1" width="640" height="360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" stroke="white" stroke-width="0" viewBox="0 0 1280 720">
<defs> <marker id="marker" viewBox="0 0 10 3" refX="5" refY="1.5" markerWidth="10" markerHeight="3" orient="auto"> <line x1="0" x2="10" y1="1.5" y2="1.5" stroke-width="3" stroke="#${armaC2}cc"/> </marker> <g id="line" stroke-width="2"> <line id="cap" x1="472" y1="304" x2="436" y2="268" stroke="transparent" marker-end="url(#marker)" style="display:none"/> <line id="shank" x1="472" y1="304" x2="468" y2="300" stroke="#${armaC1}cc" style="display:none"/> </g> <g id="lines"> <use xlink:href="#line" /> <use xlink:href="#line" transform="matrix(1 0 0 -1 0 720)" /> </g> </defs> <use xlink:href="#lines" /> <use xlink:href="#lines" transform="matrix(-1 0 0 1 1280 0)" /> <text x="640" y="580" text-anchor="middle" style="font-size:20px;font-weight:bold" fill="white">${agent}·${armaName}</text>
</svg>`); const cap = document.getElementById('cap'),
line = document.getElementById('shank');
let timeCount = 0; let playBeginTime; armaVideo.ontimeupdate = startAnim; armaToggle.onclick = toggleArma;
function toggleArma() {
armaOuter.classList.toggle('collapsed'); if (armaOuter.classList.contains('collapsed')) { armaVideo.load(); armaVideo.ontimeupdate = startAnim; cap.style.display = line.style.display = 'none'; cap.setAttribute('x2', 436); cap.setAttribute('y2', 268); line.setAttribute('x2', 468); line.setAttribute('y2', 300); timeCount = 0; } else { playBeginTime = Date.now(); armaVideo.play(); }
} function animateLine() {
armaVideo.ontimeupdate = undefined; cap.setAttribute('x2', cap.getAttribute('x2') - 3.9 + timeCount/5); cap.setAttribute('y2', cap.getAttribute('y2') - 3.9 + timeCount/5); line.setAttribute('x2', line.getAttribute('x2') - 7.02 + timeCount*.36); line.setAttribute('y2', line.getAttribute('y2') - 7.02 + timeCount*.36); timeCount++; if (timeCount < 20) setTimeout(requestAnimationFrame(animateLine), 75);
} function startAnim() {
if (armaVideo.currentTime >= 0.5) { const currentTime = Date.now(); if (currentTime - playBeginTime < 500) { armaVideo.currentTime = 0; playBeginTime = currentTime; } else { cap.style.display = line.style.display = 'initial'; requestAnimationFrame(animateLine); } }
} </script> <style>
- root {
--arma-color0: #3866becc; --arma-color0a: #3866be11; --arma-color1: #b63e44cc; --arma-color1a: #b63e4411; --arma-color2: #df8728cc; --arma-color2a: #df872811; --arma-color3: #6953c3cc; --arma-color3a: #6953c311; --arma-color4: #69da79cc; --arma-color4a: #69da7911;
}
- arma-outer {
box-shadow: 0 1px 3px #ccc; height: auto; max-width: 640px; overflow-y: hidden; width: 100%;
}
- arma-outer.collapsed {
height: 36px;
}
- arma {
background: linear-gradient(60deg, var(--arma-color), var(--arma-colora) 75%, transparent) top right/50% 50% no-repeat, linear-gradient(-60deg, var(--arma-color), var(--arma-colora) 75%, transparent) top left/50% 50% no-repeat, linear-gradient(120deg, var(--arma-color), var(--arma-colora) 75%,transparent) bottom right/50% 50% no-repeat, linear-gradient(-120deg, var(--arma-color), var(--arma-colora) 75%,transparent) bottom left/50% 50% no-repeat, black; position: relative;
}
- arma svg {
height: auto; left: 0; position: absolute; top: 0; width: 100%;
}
- arma-toggle {
border: 1px solid #ccc; cursor: pointer; padding: 6px;
} </style>