- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS only Animate - Draw Circle with border-radius and transparent background
To draw a circle with transparent background and border-radius, use the following 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;} }
The following is our HTML5 Canvas −
<div id = "box"> <div id = "demo"> <div class = "circlehalf" id = "clipped"> </div> </div> <div class = "circlehalf" id = "fixed"> </div> </div>
Advertisements