鹤山市沙坪兴盛塑料模具厂

今天小编跟大家讲解下有关使用CSS3来绘制一个月食图案 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关使用CSS3来绘制一个月食图案 的相关资料，希望小伙伴们看了有所帮助。

css3的animation是个好东西 之前应景的七夕表白爱心图。(都是中午午休时候的突发奇想。)想想 应该在很多应节场合用css玩点有意思的。突然想到上次的月食,那就玩玩。看了一个div的炫技网站.画个月亮嘛 还是尝试用一个div来实现 主div做背景黑夜 before做月亮 after做挡住月亮的黑影。用position控制位置 用animation控制动画。

CSS Code复制内容到剪贴板 .moonback{ width:600px; height:600px; background-color:#000; margin:0auto; 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:8sdoglinearinfinite; -moz-animation:8sdoglinearinfinite; animation:8sdoglinearinfinite; } @-webkit-keyframesdog{ 0%{ left:27px; top:0px; } 100%{ left:399px; top:216px; } } @-moz-keyframesdog{ 0%{ left:27px; top:0px; } 100%{ left:399px; top:216px; } } @keyframesdog{ 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:1sstarlightlinearinfinite; -moz-animation:1sstarlightlinearinfinite; animation:1sstarlightlinearinfinite; } .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:2sstarlightlinearinfinite; -moz-animation:2sstarlightlinearinfinite; animation:2sstarlightlinearinfinite; } @-webkit-keyframesstarlight{ 0%{ -webkit-transform:scale(0.5); } 100%{ -webkit-transform:scale(0.1); } } @-moz-keyframesstarlight{ 0%{ -moz-transform:scale(0.5); } 100%{ -moz-transform:scale(0.1); } } @keyframesstarlight{ 0%{ transform:scale(0.5); } 100%{ transform:scale(0.1); } }

效果图如下：

效果页面>>

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

来源：爱蒂网