中秋想看月亮还不想出门怎么办

举报
是乃德也是Ned 发表于 2022/09/02 15:53:33 2022/09/02
【摘要】 前言中秋节,团圆的日子,先祝各位节日快乐,身体健康!在吃过团圆饭后,我们是不是还有一个传统的习俗,就是赏月。古时候,人们都住在庭院里,没有现在的高楼大厦,吃完饭在院子里一坐,谈话赏月。一壶茶,一家人,岂不快哉~但是问题来了,现如今我们的生活节奏太快了,楼房遍地都是,很少人有雅兴去能够静下心来去做赏月这回事,很有可能是当天晚上因为出去办事,顺便照个相,发个pyq,赏月结束。但是大家放心,我们...

前言

中秋节,团圆的日子,先祝各位节日快乐,身体健康!

在吃过团圆饭后,我们是不是还有一个传统的习俗,就是赏月。古时候,人们都住在庭院里,没有现在的高楼大厦,吃完饭在院子里一坐,谈话赏月。

一壶茶,一家人,岂不快哉~

但是问题来了,现如今我们的生活节奏太快了,楼房遍地都是,很少人有雅兴去能够静下心来去做赏月这回事,很有可能是当天晚上因为出去办事,顺便照个相,发个pyq,赏月结束。

但是大家放心,我们是谁?伟大的程序员啊,我们当然可以做到,足不出户的赏月~

开始造月

首先我们先来一个黑色的背景板,当作夜空,在其中放上一个div,接下来造月用。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,body{
  margin: 0;
  padding: 0;
}
body{
  height: 100vh;
  background-color: black;
}
</style>
</head>
<body>
	<div class="moon" title="这是一个月亮"></div>
</body>

</html>

接下来就是为这个div月亮添加样式了,月亮嘛,得是白色,圆的是吧,所以我们添加上这些CSS样式,因为居中好看一些,所以我们在body中添加了样式使得月亮垂直水平居中。

body{
	display: flex;
  	height: 100vh;
  	justify-content: center;
  	background-color: black;
  	align-items: center;
}
.moon{
  	width: 8em;
  	height: 8em;
  	border-radius: 50%;
  	background-color: white;
}

这个时候我们的月亮是这样子的。

moon.png

嗯,是一个月亮的样子了,但是我觉得这还不够,一个月亮怎么能够没有光辉呢?加上!光辉这里,我的思路是加上白色的阴影,这样在黑色的衬托下就会显得像有光辉一样。

moonLight.png

至此,我们中秋的圆月就造完了,下面再做两个月亮不是圆月的样子。

threeMoon.png

代码如下:

html,body{
  margin: 0;
  padding: 0;
}
body{
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  background-color: black;
}
.moon1,.moon2{
  width: 8em;
  height: 8em;
  border-radius: 50%;
  background-color: white;
}
.moon1{
  box-shadow: 0 0 40px white;
}
.moon2{
  position: relative;
  box-shadow: 0 0 10px white;
}
.moon2::before{
  content:'';
  width: 8em;
  height: 8em;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  left: 2em;
  top: 0;
  z-index: 1;
}

.moon3{
  box-sizing: border-box;
  width: 8em;
  height: 8em;
  border-width: 0 0 0 1.5em;
  border-style: solid;
  border-color: white;
  border-radius: 50%;
}

	<div class="moon1" title="这个是刚刚做的圆月"></div>
	<div class="moon2" title="这个月亮右侧不能设置光辉"></div>
	<div class="moon3" title="这个月亮由边框设置的,不能设置光辉"></div>

再谈月亮

有心的小伙子可以看出,第二和第三个月亮的实现方式并不一样。那我们再来说一下他们是如何实现的吧。

第二个月亮

我们用两个纸片,用剪刀裁剪成相同大小的圆,把他们重叠在一起,错开位置,这样的形状就是我们想要的了。在css中也是一样的道理,利用伪元素,制造一个相同大小的圆,完后用黑色的圆去遮盖白色圆的右边(利用相对定位)。

下面再贴一次代码,方便大家看(只贴了css部分)

.moon1,.moon2{
  width: 8em;
  height: 8em;
  border-radius: 50%;
  background-color: white;
}
.moon2{
  position: relative;
  box-shadow: 0 0 10px white;
}
.moon2::before{
  content:'';
  width: 8em;
  height: 8em;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  left: 2em;
  top: 0;
  z-index: 1;
}

但是这样的圆的圆弧一侧是没有光辉的,因为那里是遮盖形成的。

第三个月亮

第三个月亮我们是用边框来做的。设置元素的左边框的宽度,再设置一个圆角使他变成一个弧形,别忘了把边框的颜色改成白色,这样就好啦。

注意,这个不能设置光辉,也就是阴影哦~

要不,要不就露馅啦!

(加个boder-shadow去试试吧,嘿嘿)

下面也贴一下它的代码,方便观察:

.moon3{
  box-sizing: border-box;
  width: 8em;
  height: 8em;
  border-width: 0 0 0 1.5em;
  border-style: solid;
  border-color: white;
  border-radius: 50%;
}

最后

还是要提前祝大家中秋节快乐呀!月饼🥮🥮🥮🥮🥮,记得吃一块,沾沾节气。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。