微件:DollPage/Arma

查看/隐藏印记属性

 <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;

}

1. arma-outer {

   box-shadow: 0 1px 3px #ccc;
   height: auto;
   max-width: 640px;
   overflow-y: hidden;
   width: 100%;

}

1. arma-outer.collapsed {

   height: 36px;

}

1. 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;

}

1. arma svg {

   height: auto;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;

}

1. arma-toggle {

   border: 1px solid #ccc;
   cursor: pointer;
   padding: 6px;

} </style>