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

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

    目录

    写在前面

    效果展示

    代码展示

    HTML

    css

    小彩蛋

    写在前面

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

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

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

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

    效果展示

    代码展示

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

    HTML

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <link rel="stylesheet" href="style.css">
    8.     <title>中秋节快乐title>
    9. head>
    10. <body>
    11.     <div class="container">
    12.         <div class="moon">div>
    13.         <h1>2022 祝愿中秋快乐h1>
    14.         <p>陈橘又青p>
    15.         <div class="star star1">div>
    16.         <div class="star star2">div>
    17.         <div class="star star3">div>
    18.         <div class="wave wave_1">div>
    19.         <div class="wave wave_2">div>
    20.         <div class="wave wave_3">div>
    21.     div>
    22.  
    23. body>
    24. html>

    css

    1.  
    2. @import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
    3. body {
    4. 	background: #4a47e9f1;
    5. }
    6. .container {
    7.   position: absolute;
    8.   top: 50%;
    9.   left: 50%;
    10.   width: 400px;
    11.   height: 400px;
    12.   margin-top: -200px;
    13.   margin-left: -200px;
    14.   border-radius: 2px;
    15. 	box-shadow: .5rem 1rem 1rem 0 rgba(0,0,0,0.6);
    16. 	overflow: hidden;
    17.   color: #333;
    18. 	background-image: linear-gradient(to top, #191730, #10131d, #19125f, #050e44);
    19. }
    20. .moon {
    21. 	position: absolute;
    22. 	left: 4rem;
    23. 	top: 3rem;
    24. 	width: 6rem;
    25. 	height: 6rem;
    26. 	border-radius: 50%;
    27. 	background-image: linear-gradient(to left top, #b1b1c5, #928fa3, #746f82, #575162, #3c3444);
    28.  
    29. }
    30. .moon:hover {
    31.  
    32. 		transform: scale(1.2);
    33. 		transition: 3s;
    34. }
    35. h1 {
    36.   position: absolute;
    37.   top: 30%;
    38.   left:24%;
    39.   font-size: 2.2rem;
    40.   color: goldenrod;
    41. }
    42. p {
    43.   position: absolute;
    44.   top: 40%;
    45.   left:60%;
    46.   font-family: 'Italianno', cursive;
    47.   color:goldenrod;
    48.   font-size: 2rem;
    49. }
    50.  
    51. .star {
    52. 	background: white;
    53. 	border-radius: 50%;
    54. 	position: absolute;
    55. }
    56.  
    57. .star1 {
    58. 	width: .2rem;
    59. 	height: .2rem;
    60. 	top: 3rem;
    61. 	right: 4rem;
    62. }
    63. .star2, .star3 {
    64. 	width: .1rem;
    65. 	height: .1rem;
    66. }
    67. .star2 {
    68. 	top: 5rem;
    69. 	right: 10rem;
    70. }
    71. .star3 {
    72. 	top: 14rem;
    73. 	left: 3rem;
    74. }
    75. .wave {
    76.   position: absolute;
    77.   width: 150%;
    78.   bottom: 0;
    79. }
    80.  
    81. .wave::before {
    82.   content: "";
    83.   position: absolute;
    84.   left: 0;
    85.   top: 0;
    86.   right: 0;
    87.   height: 20px;
    88.   background-size: 40px 40px;
    89.  
    90. }
    91.  
    92. .wave::after {
    93.   content: "";
    94.   position: absolute;
    95.   left: 0;
    96.   top: 0;
    97.   right: 0;
    98.   background-repeat: repeat;
    99.   height: 27px;
    100.   background-size: 80px 40px;
    101.  
    102. }
    103. .wave {
    104. 	transition: 3s;
    105. }
    106. .wave_1 {
    107.   height: 80px;
    108.   background: #7375f5;
    109.   z-index: 30;
    110. }
    111.  
    112. .wave_1::before {
    113.   background-image: radial-gradient(circle at 20px 28px, transparent 24px, #525ce2 25px);
    114. }
    115.  
    116. .wave_1::after {
    117.   background-image: radial-gradient(circle at 10px 0px, #525ce2 14px, transparent 25px);
    118. }
    119.  
    120. .wave_2 {
    121.   left: -30px;
    122.   height: 120px;
    123.   background: #525ce2;
    124.   z-index: 20;
    125. }
    126.  
    127. .wave_2::before {
    128.   background-image: radial-gradient(circle at 20px 28px, transparent 24px, #181e7e 25px);
    129. }
    130.  
    131. .wave_2::after {
    132.   background-image: radial-gradient(circle at 10px 0px, #181e7e 14px, transparent 15px);
    133. }
    134.  
    135. .wave_3 {
    136.   left: -10px;
    137.   height: 150px;
    138.   background: #181e7e;
    139.   z-index: 10;
    140. }
    141.  
    142. .wave_3::before {
    143.   background-image: radial-gradient(circle at 20px 28px, transparent 24px, #080b31 25px);
    144. }
    145.  
    146. .wave_3::after {
    147.   background-image: radial-gradient(circle at 10px 0px, #080b31 14px, transparent 25px);
    148. }
    149.  
    150. .wave_1 {
    151.           animation: wave1 10s infinite;
    152. }
    153.  
    154. @keyframes wave1 {
    155.   0% {
    156.             transform: translateX(0px);
    157.   }
    158.   25% {
    159.             transform: translateX(-50px);
    160.   }
    161.   50% {
    162.             transform: translateX(0px);
    163.   }
    164.   75% {
    165.             transform: translateX(-30px);
    166.   }
    167.   100% {
    168.             transform: translateX(0px);
    169.   }
    170. }
    171. .wave_2 {
    172.           animation: wave2 12s infinite;
    173. }
    174.  
    175. @keyframes wave2 {
    176.   0% {
    177.             transform: translateX(0px);
    178.   }
    179.   25% {
    180.             transform: translateX(25px);
    181.   }
    182.   50% {
    183.             transform: translateX(0px);
    184.   }
    185.   75% {
    186.             transform: translateX(30px);
    187.   }
    188.   100% {
    189.             transform: translateX(0px);
    190.   }
    191. }
    192. .wave_3 {
    193.           animation: wave3 9s infinite;
    194. }
    195. @keyframes wave3 {
    196.   0% {
    197.             transform: translateX(0px);
    198.   }
    199.   25% {
    200.             transform: translateX(-30px);
    201.   }
    202.   50% {
    203.             transform: translateX(0px);
    204.   }
    205.   75% {
    206.             transform: translateX(-10px);
    207.   }
    208.   100% {
    209.             transform: translateX(0px);
    210.   }
    211. }

    小彩蛋

    对于程序员来说，加班是常态。程序员的中秋有月饼，肯定也有代码要敲，有bug要改。当你回着微信信息、浏览朋友圈、刷新微博热搜榜、听着音乐软件的歌曲、和小伙伴们集体开黑时，背后可能有一群程序员在加班加点，用代码守候着你的小确幸。

    在程序员的世界里，这个世界上只有两种人：一种是懂程序的，另一种是不懂的。

    在你们的想象中“程序员过中秋”是这样子的吗？

    🔘 无时无刻不在敲代码

    🔘 买一件格子衬衫送给自己当中秋礼物

    🔘 头顶比八月十五的月亮还亮

    其实都错了，程序员哪能这么简单的过中秋呢，作为一个挣得了高薪，吃得了泡面的程序员，不但能行云流水的写代码，还可以低头写代码之余吟诗一首：

    1. #include.h>
    2. #include.h>
    3. void main
    4. {
    5. char name[3][15]={"明月","月饼","中秋"};
    6. int i,j,k;
    7. for ( i=0;i<3;i++ )
    8. if ( strcmp(name[i],"明月")==0 )
    9. {
    10. printf("明月几时有，把饼问青天。n",name[i]);
    11. }
    12. for ( j=0;j<3;j++ )
    13. if ( strcmp(name[j],"月饼")==0 )
    14. {
    15. printf("不知饼中何馅，今日是榴莲。n",name[j]);
    16. }
    17. for ( k=0;k<3;k++ )
    18. if ( strcmp(name[k],"中秋")==0 )
    19. {
    20. printf("祝大家和和美美、团团圆圆，节日快乐！n",name[k]);
    21. }
    22. }

    运行结果：

    明月几时有，把饼问青天。

    不知饼中何馅，今日是榴莲。

    祝大家和和美美、团团圆圆，节日快乐！

  • 相关阅读:
    AI技术崛起：数据可视化之路更近
    Google Chrome 浏览器以全屏模式打开
    JS--拷贝数组的方法（浅拷贝）
    django后台启动CORS跨越配置
    企微获客助手到底有哪些价值？
    数据结构：红黑树的原理和实现
    [算法刷题笔记]二叉树之左叶子之和
    传奇游戏常见问题解决办法
    五、接口测试工具：Postman
    Postgresql源码（72）ResourceOwner资源管理器
  • 原文地址：https://blog.csdn.net/m0_63947499/article/details/126505715