創建一個邊框逐漸減小 onClick 並在時間“0”觸發事件的按鈕

Question

我發現了這個很棒的工具，但在我的項目中實現起來很尷尬： https : //github.com/vydimitrov/react-countdown-circle-timer

我想創建一個可重用的按鈕組件，onClick 會通過其邊框啟動類似的倒計時效果，讓用戶有機會“撤消”他們的決定（類似於在 fb 信使中轉發消息）。 我可以弄清楚反應邏輯，但不知道從哪里開始使用 css

提前致謝

Answer 1

瀏覽您提到的組件的代碼，我注意到它使用帶有動畫筆划的 SVG 元素來創建和動畫圓形進度條。

關於這個特定問題，這篇文章是我最喜歡的一篇： https : //css-tricks.com/building-progress-ring-quickly/

這是該文章中的代碼以供將來參考。 這不是我的代碼，感謝文章的原作者：

 var circle = document.querySelector('circle'); var radius = circle.r.baseVal.value; var circumference = radius * 2 * Math.PI; circle.style.strokeDasharray = `${circumference} ${circumference}`; circle.style.strokeDashoffset = `${circumference}`; function setProgress(percent) { const offset = circumference - percent / 100 * circumference; circle.style.strokeDashoffset = offset; } const input = document.querySelector('input'); setProgress(input.value); input.addEventListener('change', function(e) { if (input.value < 101 && input.value > -1) { setProgress(input.value); } })

 html, body { background-color: #2962FF; display: flex; align-items: center; justify-content: center; height: 100%; position: relative; } .progress-ring { } .progress-ring__circle { transition: 0.35s stroke-dashoffset; // axis compensation transform: rotate(-90deg); transform-origin: 50% 50%; } input { position: fixed; top: 10px; left: 10px; width: 80px; }

 <svg class="progress-ring" width="120" height="120"> <circle class="progress-ring__circle" stroke="white" stroke-width="4" fill="transparent" r="52" cx="60" cy="60"/> </svg> <input value="35" type="number" step="5" min="0" max="100" placeholder="progress" >

Answer 2

這是一個純 css pie 計時器，它看起來與鏈接中提到的計時器非常相似。

全屏查看

 var time = 11; { var func = setInterval(function() { if (time != 0) { document.getElementsByClassName('time')[0].innerHTML = time; time--; if (time < 5) { document.getElementsByClassName('warning')[0].style.display = "block"; } } else { document.getElementsByClassName('time')[0].innerHTML = "0"; document.getElementsByClassName('warning')[0].style.display = "none"; clearInterval(func); } }, 1000); }

 .timer { height: 200px; width: 200px; border-radius: 50%; background-color: black; animation: time 5s infinite; margin-left: 570px; margin-top: 200px; } .bar { position: absolute; } .left_progress { position: absolute; height: 200px; width: 200px; background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%); border-radius: 50%; clip: rect(0px 100px 200px 0px); animation: rotate_right 6s 6s linear both; } @keyframes rotate_right { 100% { transform: rotateZ(180deg); } } .left_progress_bar { position: absolute; height: 200px; width: 200px; background-color: #E9E9E9; border-radius: 50%; clip: rect(0px 100px 200px 0px); z-index: 1; animation: mid-way 4s linear both; } .right_progress { position: absolute; height: 200px; width: 200px; background-color: #E9E9E9; border-radius: 50%; clip: rect(0px 100px 200px 0px); transform: rotateZ(180deg); animation: rotate_left 6s linear both; } @keyframes rotate_left { 100% { transform: rotateZ(360deg); } } .right_progress_bar { position: absolute; height: 200px; width: 200px; background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%); border-radius: 50%; clip: rect(0px 100px 200px 0px); transform: rotateZ(180deg); z-index: 1; } .main_content { position: absolute; height: 180px; width: 180px; border-radius: 50%; background-color: white; z-index: 4; margin-top: 10px; margin-left: 10px; font-family: 'arial'; text-align: center; } .timer_content { position: absolute; margin-top: 40px; margin-left: 45px; } .content { font-size: 15px; margin: 0px; color: #6B6C6D; } .time { font-size: 55px; margin: 0px; background: -webkit-linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .warning { position: absolute; height: 180px; width: 180px; border-radius: 50%; background-color: #DBDBDB; animation: warning_bell 1s infinite; display: none; } @keyframes warning_bell { from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } }

 <div class="timer"> <div class="right_progress_bar"> <div class="right_progress"></div> </div> <div class="left_progress_bar"> <div class="left_progress"></div> </div> <div class="main_content"> <div class="warning"></div> <div class="timer_content"> <p class="content">You can do in</p> <p class="time">12</p> <p class="content">seconds</p> </div> </div> </div>