效果地址: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. ANTS Performance Profiler和ANTS Memory Profiler

    使用ANTS Performance Profiler&ANTS Memory Profiler工具分析IIS进程内存和CPU占用过高问题   一.前言 最近一段时间,网站经常出现两个问题: ...

  2. 把指定的字符串翻译成 pig latin。

    freecodecamp上的算法题: 把指定的字符串翻译成 pig latin. Pig Latin 把一个英文单词的第一个辅音或辅音丛(consonant cluster)移到词尾,然后加上后缀 & ...

  3. OwnCloud 开源网盘

    https://www.getnas.com/freenas-owncloud/ FreeNAS 插件:OwnCloud 开源网盘 ownCloud 分为服务器端和客户端两个部分,服务器端可以在 Fr ...

  4. 在CAD二次开发中使用状态条按钮

    Pane pane = new Pane(); pane.Enabled = true; pane.Text = "状态条按钮"; pane.ToolTipText = " ...

  5. vue cli 配置信息说明

    摘自csdn http://blog.csdn.net/hongchh/article/details/55113751

  6. Linux LVM 简单操作

    查看当前磁盘分区情况fdisk -l 磁盘分区fdisk /dev/sdb# 可能用到的Type :# 8e Linux LVM# fd Linux raid auto 创建PVpvcreate /d ...

  7. C++进阶--静态初始化的惨败

    /* Initialization Fiasco 一个会使程序崩溃的细微的问题 */ // 不同文件的编译顺序是不确定的 // 如果一个文件依赖另一个文件的对象先初始化,可能出现问题 // 解决方法: ...

  8. 去除图像中的alpha通道或透明度

    自从appstore提交app改变后,虽然提交的流程还是和原来一样,但是相比以前还是有很大的改动,本来就不太喜欢 English,改版之后很多东西都变了,开发一个app就已经够他妈的蛋疼啦,上传一个a ...

  9. python: 面向对象:类和对象调用类中的变量和方法

    一. 面向对象初识 我们在生活中做事都是面向过程的,前面实现一些基本逻辑功能代码也是用面向过程的语句实现的,后来学了函数,把这些功能又装到了函数里.但用面向过程的方法去写程序,只能实现一个功能,我们要 ...

  10. [UE4]使用UnrealVS扩展快速编译C++代码

    一.如果UE4 编辑器已经打开,则VS中的重新生成项目将不能使用,一定要关了UE4 编辑器才可以.一般不是有VS自身的编译UE4的C++代码 二.epic提供了UnrealVS扩展,可以快速编译C++ ...