[Css] I want to use css to draw images (I). css to draw images

[Css] I want to use css to draw images (I). css to draw images

I used css to draw images a few years ago.

Today, we start from a simple one.

 

As a programmer with so much work pressure, I need to draw a sun first.

The html is as follows:

1 <! DOCTYPE html> 2  

Css:

1. sun {2 position: relative; 3} 4 5. sun-body {6 background-color: red; 7 border-radius: 50%; 8 height: 300px; 9 left:-100px; 10 position: absolute; 11 top:-100px; 12 width: 300px; 13 z-index: 9; 14} 15. sun-shine-light {16 background-color: yellow; 17 height: 5px; 18 left: 250px; 19 margin-top: 30px; 20 position: relative; 21 width: 300px; 22 z-index: 10; 23} 24. the sun-shine-light1 {25-webkit-transform: rotate (-3deg); 26-moz-webkit-transform: rotate (-3deg); 27-ms-webkit-transform: rotate (-3deg); 28-o-webkit-transform: rotate (-3deg); 29} 30. the sun-shine-light2 {31 top: 70px; 32 left: 240px; 33-webkit-transform: rotate (10deg); 34-moz-webkit-transform: rotate (10deg ); 35-ms-webkit-transform: rotate (10deg); 36-o-webkit-transform: rotate (10deg); 37} 38. the sun-shine-light3 {39 top: 160px; 40 left: 195px; 41-webkit-transform: rotate (30deg); 42-ms-transform: rotate (30deg); 43-o-transform: rotate (30deg); 44 transform: rotate (30deg); 45} 46. the sun-shine-light4 {47 top: 215px; 48 left: 85px; 49 width: 260px; 50-webkit-transform: rotate (55deg); 51-ms-transform: rotate (55deg ); 52-o-transform: rotate (55deg); 53 transform: rotate (55deg); 54} 55. the sun-shine-light5 {56 top: 200px; 57 left:-50px; 58 width: 230px; 59-webkit-transform: rotate (85deg); 60-ms-transform: rotate (85deg ); 61-o-transform: rotate (85deg); 62 transform: rotate (85deg); 63}View Code

 

According to @ konarling's suggestion, the following is the effect link (thanks again ):

Effect

 

Here we use a relatively unfamiliar css attribute: transform: rotate (Ndeg)

It is used to rotate, where N is an integer, indicating the rotation angle. Rotation is based on the center of gravity of the object.

 

TIPS:

When the object size (length and width) changes, the center of gravity of the rotation will also change, and this feature has been a lot of time.

After the light above is rotated at a certain angle, the width looks longer. Then its width is modified, and the corresponding left and top operations need to be modified (because the center of gravity has changed ).

 

This is today. Continue later. Thank you for watching.