Question

我试图实现这个目标时遇到了很大的问题。我不明白如何设置动画以使它变成一个圆圈，所以我从Circle Progress Bar抓取了一个工作状态，并试图找到一种方法，使用jquery按钮点击动画。我尝试使用this教程，但不知道如何正确合并它。请帮忙。这是我的Fiddle虽然它没有接近工作。

.progress {
    width:200px;
    height:200px;
    background:#fff;
    border:2px solid #000;
    position:relative;
    margin:50px;
    border-radius:50%;
    overflow:hidden;
    transform: translateZ(0px);
    display:inline-block;
}
.activatedAfter {
    -moz-animation:turn 4s linear forwards;
    -webkit-animation:turn 4s linear forwards;
    -moz-animation-delay:4s;
    -webkit-animation-delay:4s;

}
.activated {

    -moz-animation:turn 4s linear forwards;
    -webkit-animation:turn 4s linear forwards;
    -o-animation:turn 4s linear forwards;
    -ms-animation:turn 4s linear forwards;
    animation:turn 4s linear forwards;


}

@-moz-keyframes turn {
    99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-webkit-keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-o-keyframes turn {
    99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-ms-keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}

Answer 1

我在你的小提琴中将$('#progress')改为$('.progress')，因为＆＃39;进展＆＃39;是一个类而不是ID。另外，我使用您提供的链接中的示例替换了activatedAfter样式和activated:after和activated:before样式。

另外，我在代码中添加了jQuery库（它没有包含在你的小提琴中）

试试这个

＆＃13;

$('#battleButton').click(function() { 
	$('.progress').addClass('activated activatedAfter');
});

＆＃13;

body {
  background-color: #000;
}

.progress {
    width:200px;
    height:200px;
    background:#fff;
    border:2px solid #000;
    position:relative;
    margin:50px;
    border-radius:50%;
    overflow:hidden;
    transform: translateZ(0px);
    display:inline-block;
}
.activated:after {
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    top:0;
    left:-50%;
    background:tomato;
    -moz-animation:turn 4s linear forwards;
    -webkit-animation:turn 4s linear forwards;
    -moz-animation-delay:4s;
    -webkit-animation-delay:4s;
    transform-origin:100% 50%;
    z-index:1;
}
.activated:before {
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    top:0;
    left:50%;
    background:tomato;
    -moz-animation:turn 4s linear forwards;
    -webkit-animation:turn 4s linear forwards;
    -o-animation:turn 4s linear forwards;
    -ms-animation:turn 4s linear forwards;
    animation:turn 4s linear forwards;
    transform-origin:0% 50%;
    z-index:2;
}

@-moz-keyframes turn {
    99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-webkit-keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-o-keyframes turn {
    99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@-ms-keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}
@keyframes turn {
   99.9% {
        transform:rotate(180deg);
        background:tomato;
    }
    100% {
        background:#fff;
    }
}

button {
  background-color: rgba(0, 0, 0, 0);
  border-color: #81ff14;
  color: #81ff14;
  border-radius: 10%;
  float: right;
  margin-right: 100px;
  margin-top: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress"></div>
<button id="battleButton">Battle</button>

＆＃13;

在按钮单击时创建带有css动画的径向进度条

1 个答案: