使用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弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 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 图片上添加透明度渐变的效果
2009/06/29 PHP
php实现计数器方法小结
2015/01/05 PHP
php session 写入数据库
2016/02/13 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
jQuery Tools tooltip使用说明
2012/07/14 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
Vue渲染函数详解
2017/09/15 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
Python中动态检测编码chardet的使用教程
2017/07/06 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
Python设计密码强度校验程序
2020/07/30 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
航空大学应届生求职信
2013/11/10 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
水利水电专业自荐信
2014/07/08 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
世界遗产导游词
2015/02/13 职场文书
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL