html – 使用css动画旋转圆(百分比)

发布时间：2020-12-14 18:26:20 所属栏目：资源来源：网络整理

导读：如何制作以下网站 http://www.awwwards.com/上的旋转圆圈对于我的网站,我不需要它是动态的.至少不是这个时候.我尝试了不同的解决方案,包括Javascript和CSS,但我不确定创建它的最佳方法是什么. -moz-transform: rotate(270);-webkit-transform: rotate(270);

如何制作以下网站 http://www.awwwards.com/上的旋转圆圈

对于我的网站,我不需要它是动态的.至少不是这个时候.我尝试了不同的解决方案,包括Javascript和CSS,但我不确定创建它的最佳方法是什么.

-moz-transform: rotate(270);
-webkit-transform: rotate(270);
-o-transform:rotate(270deg);
transform: rotate(270deg);
transition: all 2s;

这几乎是关于过渡的全部知识,但我认为足够了.但是,在过渡开始之前,我必须把蛋糕的“馅饼”切掉,对吧？

谁知道我应该从哪里开始？

解决方法

您可以阅读这篇文章并查看一个工作示例,甚至了解它是如何工作的 css-pie-timer

UPDATE

我不喜欢那个解决方案,所以我试着用自己的方式实现它并提供一点帮助(我在这里问了几个问题)我设法做得非常优雅.

主要思想是了解如何绘制圆形扇区,然后开始绘制程度为0的部分,直到达到所需的程度.

我也让它变得可逆,只是为了好玩:).

HTML

<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

这是棘手的部分.这是棘手的部分.我以这种方式绘制扇区：

.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的

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

注意它适用于firefox和chrome.您必须为线性渐变添加IE支持.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!