怎么用CSS3绘制一个月食图案

本篇内容主要讲解“怎么用CSS3绘制一个月食图案”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用CSS3绘制一个月食图案”吧!

画个月亮嘛，还是尝试用一个div来实现，主div做背景黑夜，before做月亮，after做挡住月亮的黑影。
用position控制位置，用animation控制动画。

CSS Code复制内容到剪贴板

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也设成背景黑，那就更好了~

等等，看不到星星的天空，缺少了幸福感。
正好偷师一下，一个div里的美队盾做法，直接用★
也给个动画效果，放大缩小~

CSS Code复制内容到剪贴板

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.   }  

 效果图如下：

 效果页面>>

完毕，嗯，再给月亮加个颜色渐变？

到此，相信大家对“怎么用CSS3绘制一个月食图案”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！