效果地址: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. sql server 清除数据库中所有表的数据

    CREATE PROCEDURE  sp_DeleteAllData AS EXEC sp_MSForEachTable 'ALTER TABLE ? NOCHECK CONSTRAINT ALL'- ...

  2. docker配置ftp服务器

    docker run --name ftp_server -d -v ~/Projects/ftp:/home/vsftpd -p : -p : -p -:- -e FTP_USER=ftp -e F ...

  3. java中的自定义注解的使用

    https://www.cnblogs.com/acm-bingzi/p/javaAnnotation.html

  4. opengl 无法定位程序输入点_glutInitWithExit于动态链接库glut32.dll上

    1.问题:opengl 无法定位程序输入点_glutInitWithExit于动态链接库glut32.dll上 2.环境:vc6.0  win7,64位,opengl. 3.解决:将glut32.dl ...

  5. MaidSafe区块链项目白皮书解读

    MaidSafe.net宣布项目SAFE到社区 1. 介绍 现有的互联网基础设施越来越难以应付超过24亿互联网用户的需求,这个数字在2017年预计将增长到36亿.今天的架构中,中央中介(服务器)存储并 ...

  6. [UE4]Uniform Grid Panel

    Uniform Grid Panel:统一大小网格 一.如果不设置子控件的Row和Column值,就跟Overlay容器一样的重叠. 二.选中Uniform Grid Panel,可以设置其内的子控件 ...

  7. [UE4]一分钟实现聊天系统

    天系统:客户端发消息到服务器端,服务器端把收到的消息广播到所有客户端. 由于聊天对象需要支持“可复制”和每个客户端都发给一个,所以GameInstance.GameModeGameState都不适合存 ...

  8. [UE4]条件语句Select

    select接收3个参数,输出一个值. 当条件为true时,返回输入到True节点的值. 当条件为false时,返回输入到false节点的值. select的输入和输出参数也可以是整数.float.V ...

  9. 两种解决方法 PHP Warning: File upload error - unable to create a temporary file in Unknown

    原因:上传文件时,没有管理员权限的你不能读取临时文件夹; 解决方法(两种)找到临时文件夹并给当前访问用户所有权限; 方法一: 找到Apache默认的临时文件,步骤如下: 1.找到临时文件夹,一般在C: ...

  10. python浅copy和深copy

    import   copy person =["name",[count,3000]] husband=copy.copy(person) wife=copy.copy(perso ...