效果地址:https://codepen.io/flyingliao/pen/LaRmJr?editors=1100

感想:还有缺陷,需后期补充、完善。

HTML code:

<div class="moon1"></div>
<div class="moon2"></div>

CSS code:

html,body{
margin:;
padding:;
}
/* 元素垂直水平居中 */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
div{
margin-right: 30px;
}
.moon1{
width: 8em;
height: 8em;
border-radius: 50%;
background-color: white;
box-shadow: 0 0 20px white;
} .moon2{
position: relative;
width: 8em;
height: 8em;
border-radius: 50%;
background-color: white;
box-shadow: 0 0 10px white;
}
/* 用伪元素::before 覆盖圆的一部分;
也就是让其和父元素一样大小,背景黑色,相对定位覆盖圆的右边那部分 */
/* 缺少内弧的光辉 */
.moon2::before{
content:'';
width: 8em;
height: 8em;
border-radius: 50%;
background-color: black;
position: absolute;
left: 2em;
top:;
z-index:;
}

4.HTML+CSS制作个月亮的更多相关文章

  1. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  2. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  3. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  4. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  5. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery & CSS 制作金属质感的选择按钮

    如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...

  7. DIV+CSS制作二级横向弹出菜单,略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  8. 纯CSS制作三角(转)

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  9. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

随机推荐

  1. NAND FLASH控制器

    一.nand flash访问原理 地址空间概念 nand的编址 nand命令  命令,地址,数据 使用S3C2440的nand flash控制器访问nand flash 前几个编译出来的文件都小于4k ...

  2. Hiero扩展工具包开发小结

    写了两个月,Hiero扩展工具包终于完成了,包括了7个扩展内容,从Tags的扩展到TranscodeImage任务的检查再到版本的搜索,还有新Token的创建,算是对Hiero原生程序做了一个补充,提 ...

  3. mycat 1.6 配置【仅学习测试配置使用】

    jdk 自行配置 mycat 1.6 点击下载 配置文件 schema.xml <?xml version="1.0"?> <!DOCTYPE mycat:sch ...

  4. 美剧黑名单的插曲《Jolene》

    网易上有Slowdown 版本.<Jolene>Dolly Parton

  5. 黄聪:多个wordpress网站(不同域名)共享用户数据的方法

    WordPress可以自定义用户数据表,这样多个wordpress网站就可以共享用户数据了,有时候这是非常方便的,这些Wordpress站点应该安装在同一个数据库下,数据表前缀各不相同.由于Wordp ...

  6. PHP echo()、print()、print_r()、var_dump()、var_export()的区别

    PHP中echo.print.print_r.var_dump.var_export的用法与区别 这些均为输出变量的内容: echo();不是函数.是PHP语句.没有返回值:输出一个或者多个字符串或者 ...

  7. Springboot监控之一:SpringBoot四大神器之Actuator之2--覆盖修改spring cloud的默认的consul健康检查规则

    微服务网关是socket长连接与支付公司对接,该网关需要提供http接口给内部系统调用,当socket没有建立连接时(网关服务的高可用是haProxy搭建的,有些服务的socket可能未连上支付公司) ...

  8. jquery tr:even,tr:eq(),tr:nth-child()区别

    jquery里面是不是搞不清楚,tr的选择器? $("tr:even"),$("tr:eq(2)"),$("tr:eq(3)"),$(&qu ...

  9. maven release版本不自动更新的原因

    如果是release版本,首先从本地查找对应的版本,如果有,则使用本地,否则从远程服务器下载. 这也就是为什么我们有时想要去更新release版本的jar包,会发现无法更新,除非删除本地仓库中的版本. ...

  10. [UE4]移动相机,使用Arrow组件来标记移动位置

    一.创建一个Arrow组件来标记要移动的位置(Arrow的用法之一就是用来标注坐标). 二.使用TimeLine时间轴结合插值Lerp来移动相机