仅限CSS使用边框半径和透明背景设置animation效果
我正在尝试绘制一个带有边界半径的圆，并为其添加animation。 我可以做到这一点，但我不能做的是覆盖元素，并设置圆圈背景透明，没有取消隐藏面具。 我无法使它在元素上透明，因为蒙版需要应用来隐藏圆的左半部分，因为它旋转以模仿绘制效果。
HTML
<div class="background"> <div class="wrapper"> <div class="pie spinner"></div> <div class="pie filler"></div> <div class="mask"></div> </div> </div> CSS
.background{ background:green; z-index: 1000; } .wrapper { width: 250px; height: 250px; position: relative; margin: 40px auto; background: rgba(0,0,255,1); } .wrapper, .wrapper * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .wrapper .pie { width: 50%; height: 100%; transform-origin: 100% 50%; position: absolute; background: transparent; border: 5px solid rgba(0,0,0,0.9); } .wrapper .spinner { border-radius: 100% 0 0 100% / 50% 0 0 50%; z-index: 0; border-right: none; -webkit-animation: rota 5s linear infinite; } .wrapper:hover .spinner, .wrapper:hover .filler, .wrapper:hover .mask { animation-play-state: running; } .wrapper .filler { border-radius: 0 100% 100% 0 / 0 50% 50% 0; left: 50%; opacity: 0; -webkit-animation: opa 5s steps(1, end) infinite reverse; border-left: none; } .wrapper .mask { width: 50%; height: 100%; position: absolute; background: inherit; opacity: 1; -webkit-animation: opa 5s steps(1, end) infinite; } @-webkit-keyframes rota { 0% {transform: rotate(0deg);border-color:red;} 100% {transform: rotate(360deg);z-index:0;} } @-webkit-keyframes opa { 0% {opacity: 1;} 50%, 100% {opacity: 0;} }
http://jsfiddle.net/BuzzSmarter/gmvban4p/
在我的例子中，我需要将蓝色背景变成透明的，而不必在开始旋转之前隐藏边界半径。
请原谅这些颜色，这些不是我将要使用的，而是提供一个更清晰的方法来解决这个问题。
这是我的临时产品，我必须删除平局，以实现透明度。 http://jsfiddle.net/BuzzSmarter/gmvban4p/
这是我的解决scheme。
我在身上设置背景以显示它是透明的
body { background: repeating-linear-gradient(45deg, white 0px, lightblue 100px); height: 500px; background-size: 500px 500px; background-repeat: no-repeat; } html { height: 100%; } #container { position: absolute; width: 400px; height: 400px; border: solid red 1px; animation: colors 4s infinite; } #halfclip { width: 50%; height: 100%; right: 0px; position: absolute; overflow: hidden; transform-origin: left center; animation: cliprotate 16s steps(2) infinite; -webkit-animation: cliprotate 16s steps(2) infinite; } .halfcircle { box-sizing: border-box; height: 100%; right: 0px; position: absolute; border: solid 25px transparent; border-top-color: blue; border-left-color: blue; border-radius: 50%; } #clipped { width: 200%; animation: rotate 8s linear infinite; -webkit-animation: rotate 8s linear infinite; } #fixed { width: 100%; transform: rotate(135deg); animation: showfixed 16s steps(2) infinite; -webkit-animation: showfixed 16s linear infinite; } @-webkit-keyframes cliprotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } @keyframes cliprotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } @-webkit-keyframes rotate { 0% {transform: rotate(-45deg);} 100% {transform: rotate(135deg);} } @keyframes rotate { 0% {transform: rotate(-45deg);} 100% {transform: rotate(135deg);} } @-webkit-keyframes showfixed { 0% {opacity: 0;} 49.9% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 1;} }
<div id="container"> <div id="halfclip"> <div class="halfcircle" id="clipped"> </div> </div> <div class="halfcircle" id="fixed"> </div> </div>
