程序员过中秋丨用代码制作一个祝福小 页(html+css)

大家好，我是陈橘又青，兰经香风满，松窗夜月圆！都说我们程序员过节最没仪式感，再过两周就是中秋节了，今天我们就来制作一个简单的中秋祝福小 页，祝愿看到的所有人好运安康！（附上完整源码，需要的小伙伴自取即可）

目录

写在前面

效果展示

代码展示

HTML

css

小彩蛋

写在前面

又是一年中秋到，不知道在座各位今年的中秋将迎来与家人团聚的幸福，还是“举杯邀明月，低头写代码。”的苦涩加班，甚至一边吃团圆饭一边加班的恼人场景，想想都心酸。以上无论哪种情况都是程序员生活的真实写照呀（笑哭）。

我想离家近的小伙伴们肯定是下班立马赶回家与亲友们吃团圆饭，那么离家远，身处他乡的朋友们，有同事的地方就有家，届时和节日还公司一起加班的几个好兄弟，在月下来个痛快畅饮吧！

不管怎样，都祝福在IT行业奋斗的各位同仁们能过一个好的中秋节，工作顺顺利利，出入平平安安，家庭和和睦睦，天天开开心心，月月奖金多多，年年业绩高高，世世幸福安康。

代码完美无BUG，中秋团圆不加班！

效果展示

代码展示

由于代码十分简单，在这里就不做过多讲解了。

HTML

css

 

@import url('https://fonts.googleapis.com/css2amily=Italianno&display=swap');

body {
	background: #4a47e9f1;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: .5rem 1rem 1rem 0 rgba(0,0,0,0.6);
	overflow: hidden;
  color: #333;
	background-image: linear-gradient(to top, #191730, #10131d, #19125f, #050e44);
}

.moon {
	position: absolute;
	left: 4rem;
	top: 3rem;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	background-image: linear-gradient(to left top, #b1b1c5, #928fa3, #746f82, #575162, #3c3444);
 
}

.moon:hover {
 
		transform: scale(1.2);
		transition: 3s;
}

h1 {
  position: absolute;
  top: 30%;
  left:24%;
  font-size: 2.2rem;
  color: goldenrod;
}

p {
  position: absolute;
  top: 40%;
  left:60%;
  font-family: 'Italianno', cursive;
  color:goldenrod;
  font-size: 2rem;
}
 

.star {
	background: white;
	border-radius: 50%;
	position: absolute;
}
 

.star1 {
	width: .2rem;
	height: .2rem;
	top: 3rem;
	right: 4rem;
}

.star2, .star3 {
	width: .1rem;
	height: .1rem;
}

.star2 {
	top: 5rem;
	right: 10rem;
}

.star3 {
	top: 14rem;
	left: 3rem;
}

.wave {
  position: absolute;
  width: 150%;
  bottom: 0;
}
 

.wave::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 20px;
  background-size: 40px 40px;
 
}
 

.wave::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  background-repeat: repeat;
  height: 27px;
  background-size: 80px 40px;
 
}

.wave {
	transition: 3s;
}


                                                        
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！