使用CSS3来绘制一个月食图案
更新时间：2026-08-08 16:46:49作者：fang
css3的animation是个好东西，之前应景的七夕表白爱心图。(都是中午午休时候的突发奇想。)
想想，应该在很多应节场合用css玩点有意思的。
突然想到上次的月食,那就玩玩。
看了一个div的炫技网站.
画个月亮嘛，还是尝试用一个div来实现，主div做背景黑夜，before做月亮，after做挡住月亮的黑影。
用position控制位置，用animation控制动画。
CSS Code
.moonback{
width: 600px;
height: 600px;
background-color: #000;
margin: 0 auto;
position: relative;
}
.moonback::before{
content: ",";
display: block;
position: absolute;
left: 200px;
top: 100px;
width: 200px;
height: 200px;
background-color: #ff0;
border-radius: 100px;
}
.moonback::after{
content: " ";
display: block;
position: absolute;
left: 26px;
top: 0px;
width: 200px;
height: 200px;
background-color: #000;
border-radius: 100px;
-webkit-animation: 8s dog linear infinite;
-moz-animation: 8s dog linear infinite;
animation: 8s dog linear infinite;
}
@-webkit-keyframes dog {
0% {
left:27px;
top: 0px;
}
100% {
left: 399px;
top: 216px;
}
}
@-moz-keyframes dog {
0% {
left:27px;
top: 0px;
}
100% {
left: 399px;
top: 216px;
}
}
@keyframes dog {
0% {
left:27px;
top: 0px;
}
100% {
left: 399px;
top: 216px;
}
}
最好body也设成背景黑，那就更好了~
等等，看不到星星的天空，缺少了幸福感。
正好偷师一下，一个div里的美队盾做法，直接用★
也给个动画效果，放大缩小~
CSS Code
.star{
position: absolute;
}
.star::before{
content: "★";
display: block;
position: absolute;
left: 10px;
top: 20px;
width: auto;
height: auto;
color: #fff;
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
transform:scale(0.5);
-webkit-animation: 1s starlight linear infinite;
-moz-animation: 1s starlight linear infinite;
animation: 1s starlight linear infinite;
}
.star::after{
content: "★";
display: block;
position: absolute;
left: 40px;
top: 120px;
width: auto;
height: auto;
color: #fff;
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
transform:scale(0.5);
-webkit-animation: 2s starlight linear infinite;
-moz-animation: 2s starlight linear infinite;
animation: 2s starlight linear infinite;
}
@-webkit-keyframes starlight {
0% {
-webkit-transform:scale(0.5);
}
100% {
-webkit-transform:scale(0.1);
}
}
@-moz-keyframes starlight {
0% {
-moz-transform:scale(0.5);
}
100% {
-moz-transform:scale(0.1);
}
}
@keyframes starlight {
0% {
transform:scale(0.5);
}
100% {
transform:scale(0.1);
}
}
效果图如下：
完毕，嗯，再给月亮加个颜色渐变？
