html – 使这个CSS3动画旋转只旋转一次

概述我试图动画一个饼图,它从0度旋转到我希望它结束​​的任何程度(假设300度,无关紧要).有一个潜在的圆圈,其中一个旋转在顶部.就目前而言,饼图旋转整整360度,然后以最终的度数位置结束(在这种情况下为300).现在它只适用于Chrome. JSFiddle 我的HTML： <div class="spinner"> <span><em></em></span> <span><em></em 我试图动画一个饼图,它从0度旋转到我希望它结束​​的任何程度(假设300度,无关紧要).有一个潜在的圆圈,其中一个旋转在顶部.就目前而言,饼图旋转整整360度,然后以最终的度数位置结束(在这种情况下为300).现在它只适用于Chrome.

JSFiddle

我的HTML：

<div >  <span><em></em></span>  <span><em></em></span></div>

我的CSS：

.spinner {  wIDth: 250px;  height: 250px;  background: #aaa;  margin: 0 auto;  position: relative;}.spinner:after {  position: absolute;  content: "";  wIDth: 0%;  height: 0%;  border-radius: 100%;  background: #fff;  top: 10%;  left: 10%;}.spinner span em {  background: #0e728e;  -webkit-animation-duration: 6s; }@-webkit-keyframes rotate-rt {  0%   { -webkit-transform: rotate(0deg); }  25%  { -webkit-transform: rotate(180deg); }  100% { -webkit-transform: rotate(180deg); }}@-webkit-keyframes rotate-lt {  0%   { -webkit-transform: rotate(0deg); }  25%  { -webkit-transform: rotate(0deg); }  50%  { -webkit-transform: rotate(120deg); }  100% { -webkit-transform: rotate(120deg); }}.spinner {  border-radius: 100%;  position: relative;}.spinner span {  wIDth: 50%;  height: 100%;  overflow: hIDden;  position: absolute;}.spinner span:first-child {  left: 0;}.spinner span:last-child {  left: 50%;}.spinner span em {  border-radius: 250px;  position: absolute;  wIDth: 100%;  height: 100%;  -webkit-animation-iteration-count: 1;  -webkit-animation-timing-function: linear;  -webkit-animation-fill-mode: forwards;}.spinner span:first-child em {  left: 100%;  border-top-left-radius: 0;  border-bottom-left-radius: 0;  -webkit-animation-name: rotate-lt;   -webkit-transform-origin: 0 50%;}.spinner span:last-child em {  left: -100%;  border-top-right-radius: 0;  border-bottom-right-radius: 0;  -webkit-animation-name: rotate-rt;   -webkit-transform-origin: 100% 50%; }

解决方法 这有点棘手,因为这里有两个圆圈在旋转.你实际上想要一个(rotate-rt)中途停止而另一个(旋转-lt)继续剩下的120度(总共300度)：

@-webkit-keyframes rotate-rt {    0% { -webkit-transform: rotate(0deg); }   25% { -webkit-transform: rotate(180deg); }  100% { -webkit-transform: rotate(180deg); }}@-webkit-keyframes rotate-lt {    0% { -webkit-transform: rotate(0deg); }   25% { -webkit-transform: rotate(0deg); }   50% { -webkit-transform: rotate(120deg); }  100% { -webkit-transform: rotate(120deg); }}

http://jsfiddle.net/BkJY7/7/

编辑：为了澄清,如果你想让它旋转小于180度,你将完全删除第二个动画关键帧规则：http://jsfiddle.net/BkJY7/8/

总结

以上是内存溢出为你收集整理的html – 使这个CSS3动画旋转只旋转一次全部内容，希望文章能够帮你解决html – 使这个CSS3动画旋转只旋转一次所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。