程序员过中秋丨用代码制作一个祝福小网页(html+css)
大家好，我是陈橘又青，兰经香风满，松窗夜月圆！都说我们程序员过节最没仪式感，再过两周就是中秋节了，今天我们就来制作一个简单的中秋祝福小网页，祝愿看到的所有人好运安康！（附上完整源码，需要的小伙伴自取即可）
目录
写在前面
效果展示
代码展示
HTML
css
小彩蛋
写在前面
又是一年中秋到，不知道在座各位今年的中秋将迎来与家人团聚的幸福，还是“举杯邀明月，低头写代码。”的苦涩加班，甚至一边吃团圆饭一边加班的恼人场景，想想都心酸。以上无论哪种情况都是程序员生活的真实写照呀（笑哭）。
我想离家近的小伙伴们肯定是下班立马赶回家与亲友们吃团圆饭，那么离家远，身处他乡的朋友们，有同事的地方就有家，届时和节日还公司一起加班的几个好兄弟，在月下来个痛快畅饮吧！
不管怎样，都祝福在IT行业奋斗的各位同仁们能过一个好的中秋节，工作顺顺利利，出入平平安安，家庭和和睦睦，天天开开心心，月月奖金多多，年年业绩高高，世世幸福安康。
代码完美无BUG，中秋团圆不加班！
效果展示
代码展示
由于代码十分简单，在这里就不做过多讲解了。
HTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><title>中秋节快乐</title>
</head>
<body><div class="container"><div class="moon"></div><h1>2022 祝愿中秋快乐</h1><p>陈橘又青</p><div class="star star1"></div><div class="star star2"></div><div class="star star3"></div><div class="wave wave_1"></div><div class="wave wave_2"></div><div class="wave wave_3"></div></div></body>
</html> css
@import url('https://fonts.googleapis.com/css2?family=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;
}
.wave_1 {height: 80px;background: #7375f5;z-index: 30;
}.wave_1::before {background-image: radial-gradient(circle at 20px 28px, transparent 24px, #525ce2 25px);
}.wave_1::after {background-image: radial-gradient(circle at 10px 0px, #525ce2 14px, transparent 25px);
}.wave_2 {left: -30px;height: 120px;background: #525ce2;z-index: 20;
}.wave_2::before {background-image: radial-gradient(circle at 20px 28px, transparent 24px, #181e7e 25px);
}.wave_2::after {background-image: radial-gradient(circle at 10px 0px, #181e7e 14px, transparent 15px);
}.wave_3 {left: -10px;height: 150px;background: #181e7e;z-index: 10;
}.wave_3::before {background-image: radial-gradient(circle at 20px 28px, transparent 24px, #080b31 25px);
}.wave_3::after {background-image: radial-gradient(circle at 10px 0px, #080b31 14px, transparent 25px);
}.wave_1 {animation: wave1 10s infinite;
}@keyframes wave1 {0% {transform: translateX(0px);}25% {transform: translateX(-50px);}50% {transform: translateX(0px);}75% {transform: translateX(-30px);}100% {transform: translateX(0px);}
}
.wave_2 {animation: wave2 12s infinite;
}@keyframes wave2 {0% {transform: translateX(0px);}25% {transform: translateX(25px);}50% {transform: translateX(0px);}75% {transform: translateX(30px);}100% {transform: translateX(0px);}
}
.wave_3 {animation: wave3 9s infinite;
}
@keyframes wave3 {0% {transform: translateX(0px);}25% {transform: translateX(-30px);}50% {transform: translateX(0px);}75% {transform: translateX(-10px);}100% {transform: translateX(0px);}
}
小彩蛋
对于程序员来说，加班是常态。程序员的中秋有月饼，肯定也有代码要敲，有bug要改。当你回着微信信息、浏览朋友圈、刷新微博热搜榜、听着音乐软件的歌曲、和小伙伴们集体开黑时，背后可能有一群程序员在加班加点，用代码守候着你的小确幸。
在程序员的世界里，这个世界上只有两种人：一种是懂程序的，另一种是不懂的。
在你们的想象中“程序员过中秋”是这样子的吗？
程序员过中秋丨用代码制作一个祝福小网页(html+css)相关推荐
- 怎么用python制作简单的程序-神级程序员教你如何用python制作一个牛逼的外挂！...
玩过电脑游戏的同学对于外挂肯定不陌生,但是你在用外挂的时候有没有想过如何做一个外挂呢?(当然用外挂不是那么道义哈,呵呵),那我们就来看一下如何用python来制作一个外挂.... 我打开了4399小游 ...
- 不认识java代码_程序员进阶：优雅的代码对于一个架构师的重要性
lison:复旦大学工程硕士,专注技术十年,产品控.代码控,拥有丰富的项目经验,主持研发了多个成功上线的大型互联网项目.热爱互联网,热衷于各种web技术,精通JAVA.J2EE和前端开发,擅长互联网高 ...
- 程序员的表白： 教你制作一个百分之99成功率的表白网站 (html+css+js)
❤ 精彩专栏推荐
- 【Python妙用】用200行Python代码制作一个迷宫小游戏
相信大家都玩过迷宫的游戏,对于简单的迷宫,我们可以一眼就看出通路,但是对于复杂的迷宫,可能要仔细寻找好久,甚至耗费数天,然后可能还要分别从入口和出口两头寻找才能找的到通路,甚至也可能找不到通路. 虽然 ...
- 代码整理工具_程序员软件：程序员有哪些常用又好用的编码小工具？
最近,有很多朋友让我帮忙整理一下程序员有哪些常用又好用的编码小工具.今天,小编就整理一下哦,希望大家一起学习,一起进步! 1. Notepad++ Notepad++中文版是一款非常有特色的编辑器,是 ...
- 最受Linux程序员欢迎的7个代码编辑器的介绍及下载地址
Linux平台上的代码编辑器太少了,Linux程序员经常抱怨,自从他们使用了免费开源的系统平台后,作为一名程序员,却并没有在代码编辑器上得到足够的重视.下面我们分享了7个最受Linux程序员欢迎的代码 ...
- 浅析程序员的中秋之夜
"春种一粒粟,秋收万颗子."这是农民的中秋之夜,在丰收里进行.其中的苦与甜,是他们对生活的解读. "用最灿烂的笑容,抚慰患者的疾苦. "这是白衣天使的中秋之夜, ...
- 学习下程序员的中秋祝福
学习下程序员的中秋祝福 知识百科 中秋节,又称祭月节.月光诞.月夕.秋节.仲秋节.拜月节.月娘节.月亮节.团圆节等,是中国民间的传统节日.中秋节源自天象崇拜,由上古时代秋夕祭月演变而来.中秋节自古便有 ...
- 青岛程序员加班看不上球赛崩溃，外卖小哥伸出援手：我帮你改代码
整理 | 王晓曼 出品 | 程序人生(ID:coder _life) 近日,一段青岛外卖小哥帮奔溃程序员写代码的视频意外走红. 据了解,一程序员与朋友来酒吧看欧洲杯球赛,途中多次出去接听电话,最后不得 ...
最新文章
- linux更改桌面壁纸的脚本,ubuntu 桌面 壁纸 自动切换 方法 图解 linux
- Haskell / GHC中的“ forall”关键字有什么作用？
- Thinkpad x230设置启动顺序
- mysql一些原生基本操作
- 四种launchMode
- 强化学习（四）---基于模型动态规划问题
- 中科微研课题上犹授牌-农业大健康·李喜贵：谋定功能性农业
- 推荐一系列优秀的Android开发源码
- 理解：回归与拟合、归一化与标准化
- WinMTR-路由追踪软件
- 拼音加加 4.0 正式版发布了
- notepad下载（官网进不去）
- 清北学堂 2017-10-01
- Ubuntu Linux出现IP inet6 addr: fe80::fe0:9b43:8a0e:2463/64的解决办法
- 计算机科学与技术用什么配置的笔记本,笔记本电脑什么配置好？这两大标准你知道吗？...
- 云生态瞭望 | 腾讯云生态暖伙伴心
- 软件测试之构建测试---BVT
- 深度学习怎么跑代码？
- php realpath()
- 一文看懂中国的运营商入库认证（中国联通入库指南）
热门文章