使用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 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 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下使用SMTP发邮件的代码
2008/01/10 PHP
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
PHP学习笔记之二
2011/01/17 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
小程序如何写动态标签的实现方法
2020/02/05 Javascript
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
python中readline判断文件读取结束的方法
2014/11/08 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python删除不需要的python文件方法
2018/04/24 Python
Python3.5运算符操作实例详解
2019/04/25 Python
小结Python的反射机制
2020/09/28 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
拉丁舞学习者的自我评价
2013/10/27 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
环保建议书500字
2014/05/14 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
学校教代会开幕词
2016/03/04 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python