如何制作以下网站
http://www.awwwards.com/上的旋转圆圈
对于我的网站,我不需要它是动态的.至少不是这个时候.我尝试了不同的解决方案,包括Javascript和CSS,但我不确定创建它的最佳方法是什么.
@H_404_4@-moz-transform: rotate(270); -webkit-transform: rotate(270); -o-transform:rotate(270deg); transform: rotate(270deg); transition: all 2s;这几乎是关于过渡的全部知识,但我认为足够了.但是,在过渡开始之前,我必须把蛋糕的“馅饼”切掉,对吧？
谁知道我应该从哪里开始？
解决方法
您可以阅读这篇文章并查看一个工作示例,甚至了解它是如何工作的
css-pie-timer
UPDATE
我不喜欢那个解决方案,所以我试着用自己的方式实现它并提供一点帮助(我在这里问了几个问题)我设法做得非常优雅.
主要思想是了解如何绘制圆形扇区,然后开始绘制程度为0的部分,直到达到所需的程度.
我也让它变得可逆,只是为了好玩:).
HTML
@H_404_4@<div class="container"> <div id="activeBorder" class="active-border"> <div id="circle" class="circle"> <span class="prec 270" id="prec">0%</span> </div> </div> </div>活动边框将替换为当前百分比.在此示例中,预跨度将包含文本百分比以及所需的总度数(270).当我实现它时,百分比需要是第二类.
CSS
这是棘手的部分.这是棘手的部分.我以这种方式绘制扇区：
@H_404_4@.active-border{ position: relative; text-align: center; width: 110px; height: 110px; border-radius: 100%; background-color:#39B4CC; background-image: linear-gradient(91deg,transparent 50%,#A2ECFB 50%),linear-gradient(90deg,#A2ECFB 50%,transparent 50%); }说明：第一个线性渐变值将是90所示的度数.
如果度数大于180,我们将第一个线性渐变颜色设置为活动颜色.
JQuery的
@H_404_4@function loopit(dir){ // choose direction if (dir == "c") i++ else i--; // stop condition if (i < 0) i = 0; if (i > degs) i = degs; // calculate and set the percentage text prec = (100*i)/360; $(".prec").html(Math.round(prec)+"%"); if (i<=180){ activeBorder.css('background-image','linear-gradient(' + (90+i) + 'deg,transparent 50%)'); } else{ activeBorder.css('background-image','linear-gradient(' + (i-90) + 'deg,#39B4CC 50%),transparent 50%)'); } // recursive call setTimeout(function(){ if($("#circle").is(":hover")) loopit("c"); else loopit("nc"); },1); }这是一个working demo
