首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 1158
收藏 0 赞 0 分享

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

 效果图如下：
2015718171530640.png (600×312)

 效果页面>>

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

更多精彩内容其他人还在看

CSS样式分离之再分离达到精简与重用

无论是CSS的分离还是js的分离，其主要作用之一就是精简与重用,CSS本身就代表着精简与重用,CSS样式分离，我一般指的是“以单独的CSS文件将CSS样式分离出来”，此处的重用多针对不同页面的重用，就是说，一个样式文件，可以多个页面使用，这对于一些公共样式的重构是很有
收藏 0 赞 0 分享

CSS属性behavior的语法使用说明

在进行CSS网页布局的时候，我们经遇到刷新要保留表单里内容的时候，习惯的做法使用cookie，但是那样做实在是很麻烦，css中的behavior就为我们很好的解决了这个问题。今天jb51.net就向大家介绍CSS属性behavior的语法
收藏 0 赞 0 分享

网页制作中的水平居中和垂直居中解决方法集合

　在定义网页的CSS样式的时候，我们或许并不怎么用到垂直居中。
收藏 0 赞 0 分享

最常见IE的Bug及其fix修复方法

Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗，让你的开发生产率严重下降。下面是一个教程，告诉你9个IE上最常见的BUG以及如何解决它们。
收藏 0 赞 0 分享

CSS常用浏览器兼容调整小结

用CSS+DIV来写网站代码的好处显而易见，这里不多说了，但由于不同浏览器对CSS的解释不统一，造成不同浏览器下页面错位的现象十分常见……
收藏 0 赞 0 分享

css firefox火狐浏览器下的兼容性问题

css firefox火狐浏览器下的兼容性问题
收藏 0 赞 0 分享

DIV+CSS 浏览器兼容性小结

在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！
收藏 0 赞 0 分享

div+css 布局常识 8问

CSSer与其他IT职位一样，在找工作的时候，都会面临着面试官提出的问题，或者给出的试卷。今天jb51.net收集了常见的8条面试题目，希望对您有所帮助。
收藏 0 赞 0 分享

CSS用四种方式实现布局

CSS用四种方式实现布局
收藏 0 赞 0 分享

css 解决表格边框不显示的问题

在 IE6 中，当表格单元格中的数据为空时，边框是不显示的，在IE8中是会显示的，怎样解决这个不兼容的问题呢。
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22