Teach you to draw a standard circular pattern with CSS

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> Anim Ation-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?

"Recommended"

1. CSS3 Free Video Tutorial

2. CSS3 a code tutorial to complete a box fillet effect

3. Teach you how to write a standard CSS style

4. Tutorial on using H5 and CSS3 forms validation

5. Complete code description of the gradually glowing border by CSS3 pseudo-elements