Use pure CSS to draw beautiful circular pattern instance code

I have shared with you a very ingenious technique for drawing triangles with pure CSS (see related articles). Over the past year, I have found that this technique of using CSS to draw triangles is very useful and efficient, especially when creating a similar page effect such as a cue box/prompt.

Another form that can be easily implemented with CSS is a circular shape. With Border-radius, you can draw a variety of beautiful round patterns.

CSS Code

Just add the Border-radius of each side of your page element to 50%, and you'll get a circle of any size:

The code is as follows:

. circle {border-radius:50%;width:200px;height:200px;/* Width and height need to be equal */}

This is really simple, but we can't resist the temptation to use CSS gradients and basic rotation animations:

The code is as follows:

/* Animation definition */@keyframes spin {from {transform:rotate (0deg);} to {transform:rotate (360deg);}} </p> <p>/* Rotation, gradient */#advanced {width:200px;height:200px;</p> <p> background-image:- Moz-radial-gradient (45px 45px 45deg, circle cover, Yellow 0, Orange 100%, Red 95%); Background-image:-webkit-radial-grad Ient (45px 45px, circle cover, yellow, orange) background-image:radial-gradient (45px 45px 45deg, circle cover, Yellow 0%, Orange 100%, red 95%);</p> <p> Animation-name:spin; animation-duration:3s; /* 3 seconds */animation-iteration-count:infinite; Animation-timing-function:linear;}

Wow, this is the beautiful CSS circle!

The technique of using CSS to draw a circle doesn't look as useful as the CSS technique, but it still has its value in the design of the page. You can use the animated circle to show loading when the page loads ..., how to use, it depends on your creativity. Do you have a good idea?