이번에는 진행 상황에 따라 점차적으로 변경되는 CSS의 진행 표시줄을 가져왔습니다. 진행 상황에 따라 CSS 진행 표시줄의 텍스트가 변경되지 않는 주의 사항
은 무엇인가요? , 살펴 보겠습니다. 이 글에서는 진행 상황에 따라 변경되는 CSS 진행 표시줄 텍스트의 샘플 코드를 소개하고 있으며, 자세한 내용은 다음과 같습니다.Requirements
1. 진행 길이에 따라원리
같은 스타일의 p 두 개를 겹쳐서 사용Effect
폰트가 파란색으로 시작해서 진행률 표시줄에 따라 흰색으로 변합니다 코드<!DOCTYPE html> <html lang="cmn-hans"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <script>!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("p");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);</script> <title>进度条渐变</title> <style type="text/css"> * { box-sizing: border-box; } .box{ position: fixed; left: 50%; transform: translate(-50%); width: 320px; height: 44px; background-color: white; color: #00a0e9; border: 1px solid #00a0e9; } .process{ position: absolute; height: 100%; width: 0; background: #00a0e9; color: white; overflow: hidden; z-index: 10; } .process-text{ position: absolute; left: 160px; top: 50%; font-size: 12px; transform: translate(-50%, -50%); white-space: nowrap; } </style> <script> function process() { var t = 1; var max = 320; var progress = document.getElementById("process"); var process_texts = document.getElementsByClassName("process-text"); var interval = setInterval(function () { if (t == max) { clearInterval(interval); for (var i in process_texts){ process_texts[i].innerHTML = '完成' } } else { progress.style.width = t + "px"; for (var i in process_texts){ process_texts[i].innerHTML = '进度' + (t / max * 100).toFixed(2) + "%" } t++; } }, 10) } </script> </head> <body> <p class="box" onclick="process()"> <p class="process" id="process"> <span class="process-text">点击开始</span> </p> <span class="process-text">点击开始</span> </p> </body> </html>
CSS 설정을 사용하여 사용자 비밀번호를 기록하는 방법
🎜위 내용은 진행 상황에 따른 CSS 진행률 표시줄 텍스트 그라데이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!