4.HTML+CSS制作个月亮
效果地址: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制作个月亮的更多相关文章
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery & CSS 制作金属质感的选择按钮
如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...
- DIV+CSS制作二级横向弹出菜单,略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 纯CSS制作三角(转)
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
随机推荐
- TStringList的用法
TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. TStringList 常用方法与属性: var List: TStringList; i: Integer; begin ...
- XE5开发Android程序调用电话相关功能(短信息和电话) [转]
其实都可以通过intent和URI调用系统功能.Windows程序员可以理解成是ShellExecute.这个是万金油.可以有调用各种功能.后面会介绍. 1.短信息.很简单 方法a.不使用Intent ...
- Could not write to output file 'c:\Windows\Microsoft.NET ASP.NET Files\xx' -- 'Access is denied
网上有IIS7的解决方法,是给"C:\Windows\Temp"文件夹加上添加用户IIS_IUSRS的完全控制权限. 但我这个老机器是IIS6的,没有IIS_IUSERS用户,只能 ...
- Shader-另类实现
利用Panel的Clipping 裁剪模式(其实该实现方式也是shader)主要是修改 centX 与 Size就ok的 . panel.baseClipRegion=new Vector4(cenX ...
- 前端模拟后台返回数据之Mockjs
一.官方文档: https://github.com/nuysoft/Mock/wiki/Syntax-Specification 例子:http://mockjs.com/examples.html ...
- go学习day2
值类型和应用类型 1.值类型:变量直接存储值,内存通常在栈中分配 基本数据类型int.float.bool.string以及数组和struct.如果在函数里面修改了,函数外不变 2.引用类型:变量存储 ...
- PAT 乙级 1077 互评成绩计算 (20)
在浙大的计算机专业课中,经常有互评分组报告这个环节.一个组上台介绍自己的工作,其他组在台下为其表现评分.最后这个组的互评成绩是这样计算的:所有其他组的评分中,去掉一个最高分和一个最低分,剩下的分数取平 ...
- OpenStack单节点网络设置
一.上传镜像文件 1.上传镜像 2.检索镜像 二.创建网络 1.创建内部网络 2.创建外部网络 3.创建内部网络子网 设置DHCP分配地址池,点击已创建 4.创建外部网络子网 注意:外部网络与仅主机( ...
- [UE4]Grid Panel
一.使用Grid Panel可以做出类似暗黑3一样的物品栏:不同的物品栏占据的物品栏格子不一样. 二.GridPanel.FillRules,可以设置每个单元格内的控件是否是拉伸比重.注意:这个是Gr ...
- [UE4]通过使用Set TimerByFunctionName来实现反射机制