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

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

news 文章来源：https://blog.csdn.net/VLOKL/article/details/133606866 2024/12/14 11:46:57

目录

​编辑

引言

贺卡的初始主题 - 中秋节

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

文本动画

用代码制作这个贺卡

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

总结

引言

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

贺卡的初始主题 - 中秋节

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

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

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

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

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

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

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

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

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

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

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

文本动画

贺卡文本采用了逐字打印的动画效果，使文本内容逐渐显示在贺卡上。这通过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

[C国演义] 第十三章

第十三章 三数之和四数之和 三数之和 力扣链接 根据题目要求: 返回的数对应的下标各不相同三个数之和等于0不可包含重复的三元组 – – 即顺序是不做要求的 如: [-1 0 1] 和 [0, 1, -1] 是同一个三元组输出答案顺序不做要求 暴力解法: 排序 3个for循环 去重 — — N^3, …...

编程日记 2023/10/6 11:26:29

＜二＞Qt斗地主游戏开发：过场动画的实现

1. 过场动画效果 2. 思路分析 过场动画较为简单&#xff0c;只有一个进度条在进行滚动&#xff0c;因此实现起来不需要动画相关处理&#xff0c;仅需要图片和定时器设定&#xff0c;让进度条动起来即可。我们可以创建一个对话框&#xff0c;设定背景图片以及对话框透明无边框&a…...

编程日记 2023/10/6 11:20:24

链式法则（Chain Rule）

定义 链式法则&#xff08;Chain Rule&#xff09;是概率论和统计学中的一个基本原理&#xff0c;用于计算联合概率分布或条件概率分布的乘积。它可以用于分解一个复杂的概率分布为多个较简单的条件概率分布的乘积&#xff0c;从而简化概率分析问题。 链式法则有两种常见的形…...

编程日记 2023/10/6 11:19:23

AUTOSAR COM模块框架梳理

框架&#xff1a; COM的功能主要就是两个&#xff1a; 把IPDU内的signal提取出来提供给SWC使用&#xff0c;把SWC发送的signal拷贝到IPDU buffer内 所以&#xff0c;COM的关键字是 signal, signal group, IPDU, IPDU group Signal group 是为了保证 Complex Data Types 的数…...

编程日记 2023/10/6 11:18:22

详细介绍区块链之挖矿

对不起&#xff0c;大家&#xff0c;这篇文章对作者来说实在是太有意义和含金量了&#xff0c;作者想把它设置为关注博主才能见全文&#xff0c;请大家理解&#xff01;如果觉得还是看不懂&#xff0c;抱歉耽误大家的时间&#xff0c;就请取消关注&#xff01;&#xff01;&…...

编程日记 2023/10/6 11:17:20

华为OD机试真题-路灯照明问题（Java/C++/Go/Python）

【华为OD机试真题】路灯照明问题（Java/C++/Go/Python） 题目描述 在一条笔直的公路上安装了N个路灯，从位置0开始安装，路灯之间间距固定为100米。 每个路灯都有自己的照明半径，请计算第一个路灯和最后一个路灯之间，无法照明的区间的长度和。 输入描述 第一行为一个数N…...

编程日记 2023/10/6 11:14:18

嵌入式技术面试基本规则

潜规则1&#xff1a;面试的本质不是考试&#xff0c;而是告诉面试官你会做什么 经验不够的小伙伴特别容易犯的一个错误&#xff0c;不清楚面试官到底想问什么&#xff0c;其实整个面试中面试官并没有想难倒你的意思&#xff0c;只是想通过提问的方式来知道你会什么。 比如stm…...

编程日记 2023/10/6 11:11:15

osg实现自定义插件读取自定义格式的模型文件到场景

目录 1. 前言 2. 预备知识 3. 工具、原料 4. 代码实现 1. 前言 osg提供了很多插件来读取模型文件到场景中&#xff0c;这些插件支持大约70种格式类型的文件&#xff0c;但现实中的文件是各式各样&#xff0c;osg不可能囊括所有类型文件&#xff0c;当osg不支持某种类型格式…...

编程日记 2023/10/6 11:10:14

redis进阶

redis.conf 启动的时候就通过配置文件来启动的&#xff01; # 这个不是配置的&#xff0c;就是在这儿说明一下 # 当配置中需要配置内存大小时&#xff0c;可以使用 1k, 5GB, 4M 等类似的格式&#xff0c;其转换方式如下(不区分大小写) # # 1k > 1000 bytes # 1kb > 102…...

编程日记 2023/10/6 11:08:12

（一）正点原子STM32MP135移植——准备

一、简述 使用板卡&#xff1a;正点原子的ATK-DLMP135 V1.2 从i.mx6ull学习完过来&#xff0c;想继续学习一下移植uboot和内核的&#xff0c;但是原子官方没有MP135的移植教程&#xff0c;STM32MP157的移植教程用的又是老版本的代码&#xff0c;ST官方更新后的代码不兼容老版本…...

编程日记 2023/10/6 11:07:11

个人网站建设方案书 范文/app注册接单平台

https://sourceforge.net/p/linux-ima/wiki/Home/ http://blog.csdn.net/hsluoyc/article/details/46045875...

编程日记 2024/12/14 10:39:31

外包类设计网站/科技网站建设公司

Windows下的环境变量 文章目录1.环境变量概念2.Linux下的环境变量常见的环境变量的查看(PATH,HOME,SHELL)导入环境变量(export)linux环境变量全查看(env)3.Linux下创建环境变量(export)Linux下取消添加的环境变量(unset)4.通过代码获得Linux中的环境变量命令行参数代码查看环境…...

编程日记 2024/12/14 3:54:17

aaa云主机怎么做网站/西安百度竞价代运营

一.首先看一下最终实现的效果&#xff0c;上图 二.思路&#xff0c;主要是分两个文件实现&#xff0c;一个是页面显示文件&#xff1a;代码如下&#xff1a; <html> <head> <title>示例管理</title> #parse("ui:include") <scriptsrc&quo…...

编程日记 2024/12/14 3:08:34

山东一建建设有限公司网站首页/广告设计与制作需要学什么

简介&#xff1a;ibatis 一词来源于“internet”和“abatis”的组合&#xff0c;是一个由Clinton Begin在2001年发起的开放源代码项目&#xff0c;到后面发展的版本叫MyBatis但都是指的同一个东西。最初侧重于密码软件的开发&#xff0c;现在是一个基于Java的持久层框架&#x…...

编程日记 2024/12/14 2:42:02

网站建设对于企业发展的优势/百度竞价多少钱一个点击

红字部分来源于&#xff1a;董的博客 目前Apache Spark支持三种分布式部署方式&#xff0c;分别是standalone、spark on mesos和 spark on YARN&#xff0c;其中&#xff0c;第一种类似于MapReduce 1.0所采用的模式&#xff0c;内部实现了容错性和资源管理&#xff0c;后两种则…...

编程日记 2024/12/14 1:36:16

苏州建设交通学校网站/站长之家域名查询

为什么80%的码农都做不了架构师&#xff1f;>>> &#xff11;、函数介绍 在Java中&#xff0c;字符串用统一的Unicode编码&#xff0c;每个字符占用两个字节&#xff0c;与编码有关的两个主要函数为&#xff1a; &#xff11;&#xff09;将字符串用指定的编码集合…...

编程日记 2024/12/13 18:19:36