使用CSS3来绘制一个月食图案

前端  /  管理员 发布于 7年前   219

css3的animation是个好东西，之前应景的七夕表白爱心图。(都是中午午休时候的突发奇想。)
想想，应该在很多应节场合用css玩点有意思的。
突然想到上次的月食,那就玩玩。
看了一个div的炫技网站.
画个月亮嘛，还是尝试用一个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.   }  

 效果图如下：

 效果页面>>

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