辣椒進度條（可複制源代碼），页面设计读取进度，加载进度个性化素材
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>辣椒進度條</title> <style> body{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#fff;font-size:3em}.slider-wrapper{--slider-height:.3125em;--slider-thumb-size:1.75em;--slider-progress:50;border-radius:50px;width:7em;max-width:100%;transition:width 0.2s}.slider-wrapper.unlocked{width:8em}.slider-track{display:flex;justify-content:center;align-items:center;position:relative;border-radius:inherit;width:100%;height:var(--slider-height);background-image:linear-gradient(to right,transparent 0% calc(var(--slider-progress) * 1%),#aaa calc(var(--slider-progress) * 1%) 100%),linear-gradient(to right,#62ad1d,#fbbd1e,#fb6e1e,#e71a1a,#220000);background-size:auto,125% 100%;box-shadow:inset 0 2px 4px rgba(255,255,255,0.6),inset 0 -2px 4px rgba(0,0,0,0.1),0 2px 4px rgba(0,0,0,0.1);transition:background-size 0.2s}.slider-wrapper.unlocked > .slider-track{background-size:auto,100% 100%}.slider-input{-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute;z-index:1;left:50%;transform:translate(-50%);border-radius:inherit;width:calc(100% + var(--slider-thumb-size));height:100%;opacity:0;cursor:pointer}.slider-input::-webkit-slider-runnable-track{height:100%}.slider-input::-webkit-slider-thumb{-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-top:calc((var(--slider-height) / 2) - (var(--slider-thumb-size) / 2));border-width:0;border-radius:50%;width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.slider-input::-moz-range-thumb{-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-top:calc((var(--slider-height) / 2) - (var(--slider-thumb-size) / 2));border-width:0;border-radius:50%;width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.slider-thumb{display:flex;justify-content:center;align-items:center;position:absolute;left:calc(var(--slider-progress) / 100 * (100% - var(--slider-height)) + var(--slider-height) / 2);left:calc(var(--slider-progress) * 1%);transform:translateX(-50%);width:var(--slider-thumb-size);height:var(--slider-thumb-size);transition:transform 0.2s}.slider-input:active + .slider-thumb{transform:translateX(-50%) scale(0.86)}.slider-thumb::after{content:"";position:absolute;z-index:1;width:150%;height:150%;background-image:url("https://assets.codepen.io/4175254/explosion-2.png");background-size:800%;opacity:0}.slider-thumb.play-explosion::after{animation:explosion 0.5s steps(8) forwards;opacity:1}@keyframes explosion{to{background-position-x:-800%}}.slider-thumb-image{--slider-thumb-image-color:rgb(251 150 30);position:relative;width:100%;height:100%;fill:var(--slider-thumb-image-color);transition:transform 0.2s}.slider-thumb-image.shake{animation:shake 0.2s infinite}@keyframes shake{0%{transform:rotate(0deg)}25%{transform:rotate(5deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-5deg)}100%{transform:rotate(0deg)}} </style></head><body> <div class="slider-wrapper"> <div class="slider-track"> <input class="slider-input" type="range" value="100"> <div class="slider-thumb"> <svg class="slider-thumb-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 176"> <path d="M109.621 58.624c-2.248-1.8-5.008-2.962-7.793-3.69-55.136-14.399-18.22 90.985-88.17 59.012-.306-.14-.621-.334-.907-.511-3.895-2.411-8.839 1.419-6.676 5.669 37.499 73.676 140.46-6.692 111.993-50.336-1.504-2.305-3.109-4.594-4.889-6.692a25.95 25.95 0 0 0-3.558-3.453z" filter="url(#A)" /> <path d="M108.983 52.653c-15.728-4.464-34.22 2.06-36.123 4.369 14.141-.161 22.213-.751 29.185 10.25 12.719-.852 17.221 3.27 24.322 18.322 1.953-14.872-6.86-27.522-12.263-30.83 14.395-43.021.099-41.872-10.808-39.269 9.985 19.97 9.585 27.874 5.687 37.158z" fill="#35890e" filter="url(#B)" /> <path d="M80.361 65.109c4-4.4 8.333-.833 10 1.5-8.799-3.2-18.667 17.667-22.501 28.5 2.5-8.167 8.501-25.6 12.501-30z" fill="#fff" fill-opacity=".4" /> <defs> <filter id="A" x="3.547" y="49.575" width="124.432" height="107.417" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" /> <feBlend in="SourceGraphic" result="B" /> <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="C" /> <feOffset dx="-2" dy="-4" /> <feGaussianBlur stdDeviation="10" /> <feComposite in2="C" operator="arithmetic" k2="-1" k3="1" /> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0" /> <feBlend in2="B" result="D" /> <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="C" /> <feOffset dx="5" dy="8" /> <feGaussianBlur stdDeviation="10" /> <feComposite in2="C" operator="arithmetic" k2="-1" k3="1" /> <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" /> <feBlend in2="D" /> </filter> <filter id="B" x="72.86" y="10.442" width="53.784" height="77.152" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" /> <feBlend in="SourceGraphic" result="B" /> <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="C" /> <feOffset dy="-4" /> <feGaussianBlur stdDeviation="6" /> <feComposite in2="C" operator="arithmetic" k2="-1" k3="1" /> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0" /> <feBlend in2="B" result="D" /> <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="C" /> <feOffset dy="2" /> <feGaussianBlur stdDeviation="3" /> <feComposite in2="C" operator="arithmetic" k2="-1" k3="1" /> <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" /> <feBlend in2="D" /> </filter> </defs> </svg> </div> </div> </div></body><script> const sliderWrapper=document.querySelector('.slider-wrapper');const sliderInput=document.querySelector('.slider-input');const sliderTrack=document.querySelector('.slider-track');const sliderThumb=document.querySelector('.slider-thumb');const sliderThumbImage=document.querySelector('.slider-thumb-image');const minValue=+sliderInput.min||0;const maxValue=+sliderInput.max||100;const colorStops=[{r:98,g:173,b:29},{r:251,g:189,b:30},{r:251,g:110,b:30},{r:231,g:26,b:26},];const setSliderThumbImageColor=(progress)=>{const index=(colorStops.length-1)*progress/100;const startIndex=Math.floor(index);const endIndex=Math.ceil(index);const startColor=colorStops[startIndex];const endColor=colorStops[endIndex];const percentage=index-startIndex;const[r,g,b]=[Math.round(startColor.r+(endColor.r-startColor.r)*percentage),Math.round(startColor.g+(endColor.g-startColor.g)*percentage),Math.round(startColor.b+(endColor.b-startColor.b)*percentage)];sliderThumbImage.style.setProperty('--slider-thumb-image-color',`rgb(${r}${g}${b})`)};const updateSlider=()=>{const progress=100*+sliderInput.value/(maxValue-minValue);sliderWrapper.style.setProperty('--slider-progress',progress);setSliderThumbImageColor(progress)}sliderInput.addEventListener('input',updateSlider);updateSlider();let pointerHoldingRightTimer;let isTimerRunning=false;const detectPointerHoldingRight=(event)=>{const isSliderAtMax=+sliderInput.value===maxValue;const sliderRect=sliderWrapper.getBoundingClientRect();const pointerX=event.clientX;const offset=40;const isPointerOnSliderRight=pointerX>=(sliderRect.right+offset);if(isSliderAtMax&&isPointerOnSliderRight){if(!isTimerRunning){isTimerRunning=true;sliderThumbImage.classList.add('shake');pointerHoldingRightTimer=setTimeout(()=>{sliderInput.removeEventListener('pointerdown',detectSecret);colorStops.push({r:34,g:0,b:0});sliderWrapper.classList.add('unlocked');sliderThumb.addEventListener('animationend',()=>{sliderThumb.classList.remove('play-explosion')});sliderThumb.classList.add('play-explosion');setSliderThumbImageColor(100);sliderThumbImage.classList.remove('shake')},1000)}}else{clearTimeout(pointerHoldingRightTimer);isTimerRunning=false;sliderThumbImage.classList.remove('shake')}};const detectSecret=()=>{window.addEventListener('pointermove',detectPointerHoldingRight);sliderInput.addEventListener('pointerup',()=>{window.removeEventListener('pointermove',detectPointerHoldingRight);clearTimeout(pointerHoldingRightTimer);sliderThumbImage.classList.remove('shake')})}sliderInput.addEventListener('pointerdown',detectSecret);</script></html>
掃描查看手機版網站
