html – 使这个CSS3动画旋转只旋转一次
发布时间:2020-12-14 18:43:19 所属栏目:资源 来源:网络整理
导读:我试图动画一个饼图,它从0度旋转到我希望它结束??的任何程度(假设300度,无关紧要).有一个潜在的圆圈,其中一个旋转在顶部.就目前而言,饼图旋转整整360度,然后以最终的度数位置结束(在这种情况下为300).现在它只适用于Chrome. JSFiddle 我的HTML: div class="
我试图动画一个饼图,它从0度旋转到我希望它结束??的任何程度(假设300度,无关紧要).有一个潜在的圆圈,其中一个旋转在顶部.就目前而言,饼图旋转整整360度,然后以最终的度数位置结束(在这种情况下为300).现在它只适用于Chrome.
JSFiddle 我的HTML: <div class="spinner"> <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/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |