创建一个边框逐渐减小 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>