这是我的解决方案。
我在身体上设置背景以显示它是透明的
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 id="clipped"> </div> </div> <div id="fixed"> </div></div>这是解决方案的一种变体，它只能在悬停时运行一次
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: 300px; height: 300px; border: solid red 1px;}#halfclip { width: 50%; height: 100%; right: 0px; position: absolute; overflow: hidden; transform-origin: left center;}#container:hover #halfclip { animation: cliprotate 6s 1; transform: rotate(180deg);}@keyframes cliprotate { 0% {transform: rotate(0deg);} 50% {transform: rotate(0deg);} 50.01% {transform: rotate(180deg);} 100% {transform: rotate(180deg);}}.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%; transform: rotate(-45deg);}#container:hover #clipped { transform: rotate(135deg); animation: rotate 3s linear 2;}@keyframes rotate { 0% {transform: rotate(-45deg);} 100% {transform: rotate(135deg);}}#fixed { width: 100%; transform: rotate(135deg); opacity: 0;}#container:hover #fixed { opacity: 1; animation: showfixed 6s 1;}@keyframes showfixed { 0% {opacity: 0;} 49.99% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 1;}}<div id="container"> <div id="halfclip"> <div id="clipped"> </div> </div> <div id="fixed"> </div></div>
