点击按钮创建一个带有css动画的放射状进度条

Creating a radial progress bar with css animation on button click

本文关键字：动画 css 放射状 一个 创建 按钮      更新时间：2023-09-26

我在尝试实现这一点时遇到了一个大问题。我不知道如何为某个东西设置动画，使其在圆圈中旋转，所以我从circle Progress Bar中获取了一个正在工作的项目，并试图找到一种方法，使用jquery在单击按钮时使其设置动画。我试着使用这个教程，但不知道如何正确地结合它。请帮助。这是我的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;
    }
}

我在您的fiddle中将$('#progress')更改为$('.progress')，因为"progress"是一个类而不是ID。此外，我还用您提供的链接中的示例中的activated:after和activated:before样式替换了activatedAfter样式。

此外，我在代码中添加了jQuery库（它没有包含在您的fiddle中）

试试这个

$('#battleButton').click(function() { 
	$('.progress').addClass('activated activatedAfter');
});
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;
}
<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>

相关文章：