Question

我试图制作一个普通的HTML5 <button>，其中有一个动画的径向计时器作为背景。

我的用例是一个刷新视图的按钮。您可以单击它以刷新（从而也重新启动计时器），但视图将每两分钟自动刷新一次。按钮背景中的此计时器将用作指示自上次刷新以来已经过多长时间以及再次自动刷新之前的时间。

我只需要它可以在合适的最新版本的Chrome，Firefox和Safari中使用。不要让IE流汗。

我设法使用SVG和使用<polygon>重新计算其分数的requestAnimationFrame做了我想做的事情，但它在Firefox中运行不佳，导致我的MBP＆＃39;是粉丝踢的。我确定我可以在<canvas>中执行此操作，但是有没有办法只使用CSS执行此操作？

我知道上面的描述可能难以想象效果，所以这里有一些与我想要实现的接近的例子。

These two使用<canvas>，但您应该能够理解。不过，我并不是在寻找任何有趣的东西。纯色很好。

This one非常接近，但它使用了SVG。即使动画是通过CSS转换实现的，SVG仍然会对我的CPU造成负担。

最后要注意的是，我试图制作背景，而不是叠加。文本（或者在我的例子中是一个fontawesome字形）将位于背景之上。

Answer 1

看看你是否可以对这些类和脚本做任何事情。

＆＃13;

var myCounter = new Countdown({
            seconds: 120,  // number of seconds to count down
            onUpdateStatus: function (sec) {

            }, // callback for each second
            onCounterEnd: function () {
                
            } // final action
        });

        

        function Countdown(options) {
            var timer,
            instance = this,
            seconds = options.seconds,
            updateStatus = options.onUpdateStatus,
            counterEnd = options.onCounterEnd;

            function decrementCounter() {
                updateStatus(seconds);
                if (seconds === 0) {
                    counterEnd();
                    instance.stop();
                }
                seconds--;
            }

            this.start = function () {
                clearInterval(timer);
                timer = 0;
                seconds = options.seconds;
                timer = setInterval(decrementCounter, 1000);
            };

            this.stop = function () {
                clearInterval(timer);
            };
        }

myCounter.start();

＆＃13;

.circle {
	        position: relative;
	        margin: 7em auto;
	        width: 16em; height: 16em;
	        border-radius: 50%;
	        background: black;
        }
        .arc {
	        overflow: hidden;
	        position: absolute;
	        top: 0em; right:50%; bottom: 50%; left: 0em;
	        transform-origin: 100% 100%;
	        transform: rotate(90deg) skewX(30deg);
        }
        .arc:before {
	        box-sizing: border-box;
	        display: block;
	        border: solid 8em grey;
	        width: 200%; height: 200%;
	        border-radius: 50%;
	        transform: skewX(-30deg);
	        content: '';
        }

＆＃13;

<div class="circle">
    <div class="arc"></div>
    </div>

＆＃13;

HTML5按钮背景：动画辐射冷却计时器

1 个答案: