怎么用CSS3繪制一個(gè)月食圖案

本篇內(nèi)容主要講解“怎么用CSS3繪制一個(gè)月食圖案”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么用CSS3繪制一個(gè)月食圖案”吧!

畫個(gè)月亮嘛，還是嘗試用一個(gè)div來(lái)實(shí)現(xiàn)，主div做背景黑夜，before做月亮，after做擋住月亮的黑影。
用position控制位置，用animation控制動(dòng)畫。

CSS Code復(fù)制內(nèi)容到剪貼板

1. .moonback{   

2.     width: 600px;   

3.     height: 600px;   

4.     background-color: #000;   

5.     margin: 0 auto;   

6.   

7.     position: relative;   

8.   

9.   }   

10.   .moonback::before{   

11.     content: ",";   

12.     display: block;   

13.     position: absolute;   

14.     left: 200px;   

15.     top: 100px;   

16.   

17.     width: 200px;   

18.     height: 200px;   

19.     background-color: #ff0;   

20.     border-radius: 100px;   

21.   }   

22.   .moonback::after{   

23.     content: " ";   

24.     display: block;   

25.     position: absolute;   

26.     left: 26px;   

27.     top: 0px;   

28.   

29.     width: 200px;   

30.     height: 200px;   

31.     background-color: #000;   

32.     border-radius: 100px;   

33.   

34.     -webkit-animation: 8s dog linear infinite;   

35.     -moz-animation: 8s dog linear infinite;   

36.     animation: 8s dog linear infinite;   

37.   }   

38.   

39.   @-webkit-keyframes dog {   

40.     0% {    

41.       left:27px;   

42.       top: 0px;   

43.     }   

44.     100% {    

45.       left: 399px;   

46.       top: 216px;   

47.     }   

48.   }   

49.   @-moz-keyframes dog {   

50.     0% {    

51.       left:27px;   

52.       top: 0px;   

53.     }   

54.     100% {    

55.       left: 399px;   

56.       top: 216px;   

57.     }   

58.   }   

59.   @keyframes dog {   

60.     0% {    

61.       left:27px;   

62.       top: 0px;   

63.     }   

64.     100% {    

65.       left: 399px;   

66.       top: 216px;   

67.     }   

68.   }  

最好body也設(shè)成背景黑，那就更好了~

等等，看不到星星的天空，缺少了幸福感。
正好偷師一下，一個(gè)div里的美隊(duì)盾做法，直接用★
也給個(gè)動(dòng)畫效果，放大縮小~

CSS Code復(fù)制內(nèi)容到剪貼板

1. .star{   

2.     position: absolute;   

3.   }   

4.   .star::before{   

5.     content: "★";   

6.     display: block;   

7.     position: absolute;   

8.     left: 10px;   

9.     top: 20px;   

10.   

11.     width: auto;   

12.     height: auto;   

13.     color: #fff;   

14.     -webkit-transform:scale(0.5);   

15.     -moz-transform:scale(0.5);   

16.     transform:scale(0.5);   

17.   

18.     -webkit-animation: 1s starlight linear infinite;   

19.     -moz-animation: 1s starlight linear infinite;   

20.     animation: 1s starlight linear infinite;   

21.   }   

22.   .star::after{   

23.     content: "★";   

24.     display: block;   

25.     position: absolute;   

26.     left: 40px;   

27.     top: 120px;   

28.   

29.     width: auto;   

30.     height: auto;   

31.     color: #fff;   

32.     -webkit-transform:scale(0.5);   

33.     -moz-transform:scale(0.5);   

34.     transform:scale(0.5);   

35.   

36.     -webkit-animation: 2s starlight linear infinite;   

37.     -moz-animation: 2s starlight linear infinite;   

38.     animation: 2s starlight linear infinite;   

39.   }   

40.   

41.   @-webkit-keyframes starlight {   

42.     0% {    

43.       -webkit-transform:scale(0.5);   

44.     }   

45.     100% {    

46.       -webkit-transform:scale(0.1);   

47.     }   

48.   }   

49.   @-moz-keyframes starlight {   

50.     0% {    

51.       -moz-transform:scale(0.5);   

52.     }   

53.     100% {    

54.       -moz-transform:scale(0.1);   

55.     }   

56.   }   

57.   @keyframes starlight {   

58.     0% {    

59.       transform:scale(0.5);   

60.     }   

61.     100% {    

62.       transform:scale(0.1);   

63.     }   

64.   }  

 效果圖如下：

 效果頁(yè)面>>

完畢，嗯，再給月亮加個(gè)顏色漸變？

到此，相信大家對(duì)“怎么用CSS3繪制一個(gè)月食圖案”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！