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


Posted in HTML / CSS onJuly 18, 2015

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

CSS Code复制内容到剪贴板
  1. .moonback{   
  2.     width600px;   
  3.     height600px;   
  4.     background-color#000;   
  5.     margin: 0 auto;   
  6.   
  7.     positionrelative;   
  8.   
  9.   }   
  10.   .moonback::before{   
  11.     content",";   
  12.     displayblock;   
  13.     positionabsolute;   
  14.     left200px;   
  15.     top100px;   
  16.   
  17.     width200px;   
  18.     height200px;   
  19.     background-color#ff0;   
  20.     border-radius: 100px;   
  21.   }   
  22.   .moonback::after{   
  23.     content" ";   
  24.     displayblock;   
  25.     positionabsolute;   
  26.     left26px;   
  27.     top0px;   
  28.   
  29.     width200px;   
  30.     height200px;   
  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.       top0px;   
  43.     }   
  44.     100% {    
  45.       left399px;   
  46.       top216px;   
  47.     }   
  48.   }   
  49.   @-moz-keyframes dog {   
  50.     0% {    
  51.       left:27px;   
  52.       top0px;   
  53.     }   
  54.     100% {    
  55.       left399px;   
  56.       top216px;   
  57.     }   
  58.   }   
  59.   @keyframes dog {   
  60.     0% {    
  61.       left:27px;   
  62.       top0px;   
  63.     }   
  64.     100% {    
  65.       left399px;   
  66.       top216px;   
  67.     }   
  68.   }  

最好body也设成背景黑,那就更好了~

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

CSS Code复制内容到剪贴板
  1. .star{   
  2.     positionabsolute;   
  3.   }   
  4.   .star::before{   
  5.     content"★";   
  6.     displayblock;   
  7.     positionabsolute;   
  8.     left10px;   
  9.     top20px;   
  10.   
  11.     widthauto;   
  12.     heightauto;   
  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.     displayblock;   
  25.     positionabsolute;   
  26.     left40px;   
  27.     top120px;   
  28.   
  29.     widthauto;   
  30.     heightauto;   
  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来绘制一个月食图案

 效果页面>>

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

HTML / CSS 相关文章推荐
CSS3——齿轮转动关键代码
May 02 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 #HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 #HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 #HTML / CSS
举例详解CSS3中的Transition
Jul 15 #HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 #HTML / CSS
初探CSS3中的calc()功能
Jul 14 #HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 #HTML / CSS
You might like
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
2020/11/09 jQuery
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
python 模拟登录B站的示例代码
2020/12/15 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
室内设计专业自荐信
2014/05/31 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
国庆庆典邀请函
2015/02/02 职场文书
奖金申请报告模板
2015/05/15 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书