当前位置： 首页 > news >正文

创意中秋与国庆贺卡 - 用代码为节日增添喜悦

news 2025/12/13 14:05:10

目录

​编辑

引言

贺卡的初始主题 - 中秋节

点击头像，切换至国庆主题

文本动画

用代码制作这个贺卡

获取完整代码（简单免费）

总结

引言

中秋佳节和国庆日是中国两个重要的传统节日，一个寓意团圆与祝福，另一个则是对伟大祖国的庆祝与热爱。今天，我们将带您融入代码的魔力，创造一个能够在这两个特殊节日之间自由切换的贺卡。通过代码，我们能够为这些节日增添更多的喜悦和创意。

贺卡的初始主题 - 中秋节

贺卡的初始主题是中秋节，这个贺卡以明亮的月亮为背景，传达出家人团聚的温馨情感。当您打开这个贺卡时，将会看到以下内容：👇👇👇

点击这里直接可以在手机上观看效果，网络不好的需要等待一下，点击头像可以进行主题跳转

  • 标题：中秋节快乐！
  • 贺词： "月圆夜，思念在心，愿幸福的时光洒满你们的每一天。愿你和家人团圆，共度温馨的中秋佳节。月圆人团圆，幸福满满！"

贺卡中的动画效果会逐字逐句地呈现出贺词，增强了贺卡的趣味性。

点击头像，切换至国庆主题

贺卡中有一个头像，当您点击头像时，贺卡的主题会切换至国庆日。国庆主题下的贺卡包括以下变化：

  • 背景： 背景图变为国庆主题，呈现出国旗与庆典氛围。

  • 头像： 头像也随之变化，展示出国庆的元素。

  • 标题： 贺卡标题更新为 "国庆快乐！"

  • 贺词： 清空了贺卡文字，以展示出全新的祝福词句：

    "愿祖国繁荣富强，人民幸福安康。国庆节，我们共庆盛世华章。让我们携手奋进，共筑美好明天。祝福伟大的祖国，永远充满荣光！"

文本动画

贺卡文本采用了逐字打印的动画效果，使文本内容逐渐显示在贺卡上。这通过JavaScript中的定时器和逐字打印函数来实现。

function typeText(text) {let index = 0;const textContainer = greetingText;textContainer.innerHTML = ''; // 清空文字内容function type() {if (index < text.length) {textContainer.innerHTML += text.charAt(index);index++;setTimeout(type, 100); // 设置每个字符出现的时间间隔}}type(); // 开始逐个字符显示文字
}

用代码制作这个贺卡

这个贺卡的制作使用了HTML、CSS和JavaScript。HTML用于贺卡的结构，CSS用于样式和动画，而JavaScript则用于实现主题的切换和文字的逐字呈现效果。

如果您也想制作一个类似的贺卡，您可以使用下面的源码作为起点，然后根据您自己的创意和需求来进行修改。

<!DOCTYPE html>
<html lang="en">
<head><!-- 省略部分头部内容 -->
</head>
<body>
<div id="card"><div id="avatar-container"><div id="avatar"></div></div><div id="text-container"><h1 id="greeting-title">中秋节快乐！</h1><p id="greeting-text">月圆夜，思念在心<br>愿幸福的时光洒满你们的每一天。<br>愿你和家人团圆，共度温馨的中秋佳节。<br>月圆人团圆，幸福满满！</p></div>
</div>
<!-- 省略部分脚本内容 -->
</body>
</html>

获取完整代码（简单免费）

这个贺卡项目的完整代码和资源可以在我的GitHub仓库中找到。您可以访问以下链接以获取代码并支持我的工作：点个star收藏一下呗(●'◡'●)

点击这里可以进入我的GitHub仓库里面有非常多的有趣的项目

在这个仓库中，您将找到包含HTML、CSS和JavaScript文件的源代码，以及用于背景图和头像的示例图片。您可以根据自己的需求进行自定义和扩展，制作出属于自己的独特贺卡。

如果您喜欢这个项目和博客内容，不要忘记给GitHub仓库点个"star"，这是对我的工作的认可和支持，也会鼓励我继续分享更多创意和代码。感谢您的支持！

总结

这个创意的贺卡项目展示了如何通过代码为特殊节日增添创意和乐趣。通过头像的点击，我们能够轻松地切换主题，从中秋到国庆，为不同的节日带来不同的祝福和庆祝方式。

希望这个项目能够启发您，用创意和代码为各种场合制作有趣的作品。无论是哪个节日，都可以通过代码来表达您的祝福和情感。祝大家中秋节和国庆快乐！

本章的内容就到这里了，觉得对你有帮助的话就支持一下博主把~

这是我的GitHub网址，感兴趣的话可以给我个star✨嘛

🌌点击下方个人名片，交流会更方便哦~（欢迎到博主主页加入我们的 CodeCrafters联盟一起交流学习）↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ 

相关文章：

创意中秋与国庆贺卡 - 用代码为节日增添喜悦

目录 ​编辑 引言 贺卡的初始主题 - 中秋节 点击头像&#xff0c;切换至国庆主题 文本动画 用代码制作这个贺卡 获取完整代码&#xff08;简单免费&#xff09; 总结 引言 中秋佳节和国庆日是中国两个重要的传统节日&#xff0c;一个寓意团圆与祝福&#xff0c;另一个…...

编程日记 2023/10/6 12:05:06

专业综合课程设计 - 优阅书城项目（第一版）

此项目是《专业综合课程设计》带练项目 实现的功能有&#xff1a; 登录、注销、添加图书、删除图书、编辑图书 包含资源&#xff1a; 优阅书城&#xff08;bookstore&#xff09;源码 数据库数据 课程笔记 下载链接&#xff1a;https://wwpv.lanzoue.com/i79nx1av4doj 登录功…...

编程日记 2023/10/6 12:03:04

【剑指Offer】13.机器人的运动范围

题目 地上有一个 rows 行和 cols 列的方格。坐标从 [0,0] 到 [rows-1,cols-1] 。一个机器人从坐标 [0,0] 的格子开始移动&#xff0c;每一次只能向左&#xff0c;右&#xff0c;上&#xff0c;下四个方向移动一格&#xff0c;但是不能进入行坐标和列坐标的数位之和大于 thresh…...

编程日记 2023/10/6 12:02:03

【Qt基础篇】信号和槽

文章目录 一些常见的bug&#xff1a;字符集不对产生的错误VS平台中文乱码 QT的优点关于.pro文件QtCreator快捷键最简单的qt程序按钮的创建对象模型**Qt窗口坐标**体系信号和槽机制connect函数系统自带的信号和槽案例&#xff1a;实现点击按钮-关闭窗口的案例 自定义信号和槽案例…...

编程日记 2023/10/6 12:00:01

.netCore用DispatchProxy实现动态代理

在 .NET Core 中&#xff0c;你可以使用 DispatchProxy 类来实现动态代理。DispatchProxy 允许你在运行时创建一个代理对象&#xff0c;该代理对象可以拦截对其所代理的对象的方法调用&#xff0c;并在方法调用前后执行自定义的逻辑。这在 AOP&#xff08;面向切面编程&#xf…...

编程日记 2023/10/6 11:57:59

好奇喵 | Tor浏览器——访问.onion网址，揭开Dark Web的神秘面纱

前言 在之前的博客中&#xff1a; 1.Surface Web —&#xff1e; Deep Web —&#xff1e; Dark Web&#xff0c;我们解释了表层网络、深层网络等的相关概念&#xff1b; 2.Tor浏览器——层层剥开洋葱&#xff0c;我们阐述了Tor的历史和基本工作原理&#xff1b; 3.Tor浏览器…...

编程日记 2023/10/6 11:56:57

Maven 中引用其他项目jar包出现BOOT-INF问题

问题 在B项目中引入A项目的类&#xff0c;但是发现怎么也引入不进来 A项目打包之后&#xff0c;想在B项目中引用jar 在B项目中发现类文件无法引用 参考网上进行清缓存等一系列操作都没有解决。 最后发现引用的jar包中包含BOOT-INF&#xff0c; 然后去A项目中查找&#xff…...

编程日记 2023/10/6 11:52:53

PHP框架面试题

目录 1、什么是PHP框架&#xff1f; 2、常见的PHP框架有哪些&#xff1f; 3、为什么要使用PHP框架&#xff1f; 4、什么是路由&#xff1f;PHP框架中的路由是如何实现的&#xff1f; 5.TP的特性有哪些? 6.laravel有那些特点? 7.TP框架和Laravel框架的区别 8.tp5和tp6区…...

编程日记 2023/10/6 11:51:52

如何清理C盘

当前最棘手的问题是C盘满了&#xff0c;如何清理成了一个大问题&#xff0c;在本篇文章中我将记录我在清理c盘空间过程中的探索。 2023-10-06探索无果&#xff0c;记录于此。...

编程日记 2023/10/6 11:50:51

计算机网络基础知识

1 计算机网络是指将多台计算机连接在一起&#xff0c;以便它们可以相互通信和共享资源的系统。在本文中&#xff0c;我们将详细介绍计算机网络的基础知识&#xff0c;包括网络的分类、网络协议、网络拓扑、网络设备和网络安全等方面的内容。 网络分类 计算机网络可以根据其范…...

编程日记 2023/10/6 11:49:50

Go语言面经进阶10问

1.Golang可变参数 函数方法的参数&#xff0c;可以是任意多个&#xff0c;这种我们称之为可以变参数&#xff0c;比如我们常用的fmt.Println()这类函数&#xff0c;可以接收一个可变的参数。可以变参数&#xff0c;可以是任意多个。我们自己也可以定义可以变参数&#xff0c;可…...

编程日记 2023/10/6 11:46:47

大厂真题：【DP】米哈游2023秋招-米小游与魔法少女-奇运

题目描述与示例 题目描述 米小游都快保底了还没抽到希儿&#xff0c;好生气哦&#xff01;只能打会活动再拿点水晶。 米小游和世界第一可爱的魔法少女 TeRiRi 正在打 BOSS&#xff0c;BOSS 的血量为h&#xff0c;当 BOSS 血量小于等于0时&#xff0c;BOSS 死亡。TeRiRi 有一…...

编程日记 2023/10/6 11:44:45

后端面经学习自测（一）

文章目录 1、MySQL-MVCC2、MySQL-原子性怎么实现3、MySQL-持久性怎么实现隔离性怎么实现 4、操作系统-死锁产生手写死锁死锁排查 5、操作系统-避免死锁死锁的四个必要条件预防死锁 6、操作系统-pageCache是什么零拷贝 7、计算机网络-TCP的可靠性和顺序性怎么实现8、计算机网络-…...

编程日记 2023/10/6 11:43:44

win10、win11安装Ubuntu 22.04

目前为止&#xff08;2023年10月6日&#xff09;&#xff0c;最新的 Ubuntu 版本是 Ubuntu 22.04。你可以按照以下步骤在 Windows 上使用 WSL 安装 Ubuntu 22.04&#xff1a; 检查系统要求&#xff1a; 确保你的操作系统是 Windows 10 或更高版本&#xff0c;并已安装 Windows …...

编程日记 2023/10/6 11:38:40

golang gin框架1——简单案例以及api版本控制

gin框架 gin是golang的一个后台WEB框架 简单案例 package mainimport ("github.com/gin-gonic/gin""net/http" )func main() {r : gin.Default()r.GET("/ping", func(c *gin.Context) {//以json形式输出&#xff0c;还可以xml protobufc.JSON…...

编程日记 2023/10/6 11:37:40

Redisson—分布式对象

每个Redisson对象实例都会有一个与之对应的Redis数据实例&#xff0c;可以通过调用getName方法来取得Redis数据实例的名称&#xff08;key&#xff09;。 RMap map redisson.getMap("mymap"); map.getName(); // mymap 所有与Redis key相关的操作都归纳在RKeys这…...

编程日记 2023/10/6 11:34:37

alsa pcm接口之在unix环境的传输方法

在unix环境,数据片段响应被接受通过standard I/O call或事件等待路径(poll或select功能),为完成列表,异步通知响应该被列举出来.ALSA实现那些方法被描述在ALSA transfers部分. 标准I/O传输(Standadrd I/O transfers) 这个标准I/O传输常常使用read和write C语言函数集,对于那些函…...

编程日记 2023/10/6 11:32:35

小谈设计模式（20）—组合模式

小谈设计模式&#xff08;20&#xff09;—组合模式 专栏介绍专栏地址专栏介绍 组合模式对象类型叶节点组合节点 核心思想应用场景123 结构图结构图分析 Java语言实现首先&#xff0c;我们需要定义一个抽象的组件类 Component&#xff0c;它包含了组合节点和叶节点的公共操作&a…...

编程日记 2023/10/6 11:31:34

sheng的学习笔记-【中文】【吴恩达课后测验】Course 1 - 神经网络和深度学习 - 第三周测验

课程1_第3周_测验题 目录&#xff1a;目录 第一题 1.以下哪一项是正确的&#xff1f; A. 【  】 a [ 2 ] ( 12 ) a^{[2](12)} a[2](12)是第12层&#xff0c;第2个训练数据的激活向量。 B. 【  】X是一个矩阵&#xff0c;其中每个列都是一个训练示例。 C. 【  】 a 4 […...

编程日记 2023/10/6 11:30:33

一文详解动态链表和静态链表的区别

1、引言 本文主要是对动态链表和静态链表的区别进行原理上的讲解分析&#xff0c;先通过对顺序表和动态链表概念和特点的原理性介绍&#xff0c;进而引申出静态链表的作用&#xff0c;以及其概念。通过这些原理性的概述&#xff0c;最后总结归纳出动态链表和静态链表的区别。本…...

编程日记 2023/10/6 11:28:31

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/12/8 9:25:09

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/12/13 10:22:16

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2025/10/17 0:18:22

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/12/9 3:52:39

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2025/12/5 18:12:58

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2025/12/10 16:19:48

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2025/12/11 8:08:57

【JVM】Java虚拟机（二）——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

编程新知 2025/12/13 7:11:33