ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড এবং border-radius দিয়ে বৃত্ত আঁকতে নিচের CSS ব্যবহার করুন −
body { background: repeating-linear-gradient(45deg, white 0px, green 100px); height: 400px; background-size: 400px 400px; background-repeat: no-repeat; } html { height: 100%; } #box { position: absolute; width: 400px; height: 400px; border: solid blue 2px; animation: colors 5s infinite; } #demo { width: 50%; height: 100%; right: 0px; position: absolute; overflow: hidden; transform-origin: left center; animation: cliprotate 18s steps(2) infinite; -webkit-animation: cliprotate 18s steps(2) infinite; } .circlehalf { box-sizing: border-box; height: 100%; right: 0px; position: absolute; border: solid 20px 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(145deg); animation: showfixed 18s steps(2) infinite; -webkit-animation: showfixed 18s 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;} }নিচে আমাদের HTML5 ক্যানভাস দেওয়া হলো −
<div id = "box"> <div id = "demo"> <div class = "circlehalf" id = "clipped"> </div> </div> <div class = "circlehalf" id = "fixed"> </div> </div>
