前言

2021年马上结束了，不管这一年经历了什么，付出和收获了什么，只能挥手和2021告别了。但愿这一年的经历，能让我们更好的把握未来的时间，把握即将到来的2022年。值此元旦来临之际，本人制作了一个HTML5特效，预祝各位新年快乐，在2022年美梦成真！文末送出了哪些曾经上过热搜的CSDN博客

文章目录

前言
- 1.数字爱心
- - 1.1 html
- 2.新年快乐
- - 2.1 html
- 3.拆红包
- - 3.1 html
- 4.元旦倒计时
- 5.Python代码

1.数字爱心

这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,
每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的.

1.1 html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas爱心时钟</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="js/digit.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<div style="text-align:center;margin-top:50px; font:normal 14px/24px 'MicroSoft YaHei';"><h2>HTML5 Canvas爱心时钟</h2>
<p>来源：IT邦德</a></p>
</div>
</body>
</html>

2.新年快乐

2.1 html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>新年快乐HTML5特效</title><link rel="stylesheet" href="css/hovertree.css" media="screen" type="text/css" /><link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body><div class="hovertree" id="hovertree"><div class="hewenqiballoon"><div><span>亲</span></div><div><span>新</span></div><div><span>年</span></div><div><span>快</span></div><div><span>乐</span></div><div><span>!</span></div></div></div><canvas id="text" width="500" height="100"></canvas><canvas id="stage" width="500" height="100"></canvas><form id="form"><input type="submit" value="告别" /> <input type="text" id="inputText" value="2016" style="display:none" /></form><script src='js/TweenLite.min.js'></script><script src='js/easeljs-0.7.1.min.js'></script><script src="js/hovertree.js"></script>
</body>
</html>

3.拆红包

3.1 html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>摇红包</title>
<link rel="stylesheet" href="css/csshake.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/zepto.min.js"></script>
<script src="js/red.js"></script>
</head>
<body>
<!-- 红包 -->
<div class="red"><!-- shake-chunk --><span style="background-image: url(img/red-w.png);"></span><button class="redbutton" type="button" id="hovertreeOpen">拆红包</button><div class="red-jg"><h1 id="hwqKey">CSDN</h1><h5 id="hwqValue">我喜欢你！</h5></div>
</div>
<!-- End 红包 -->
<!-- 按钮 -->
<div class="t-btn"><button id="hewenqiAgain">再抽一次</button>
</div>
<!-- End 按钮 --><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div><script>function hoverTreeRandom(n) {return Math.floor(Math.random() * n + 1)}var hovertreePrize = new Array();hovertreePrize[0] = { "key": "恭喜您：", "value": "获得88元代金卷！" };hovertreePrize[1] = { "key": "恭喜您：", "value": "获得苹果八袋！" };hovertreePrize[2] = { "key": "祝愿您：", "value": "新年快乐，大吉大利！" };hovertreePrize[3] = { "key": "祝愿您：", "value": "笑口常开，天天开心！" };hovertreePrize[4] = { "key": "祝愿您：", "value": "心想事成，美梦成真！" };hovertreePrize[4] = { "key": "祝愿您：", "value": "事业顺利，财源滚滚！" };var h_index = 0;document.getElementById("hove"+"rtreeOpen").addEventListener("click", function () {h_index = hoverTreeRandom(hovertreePrize.length)-1;document.getElementById("hwqKey").innerText = hovertreePrize[h_index].key;document.getElementById("hwqValue").innerText = hovertreePrize[h_index].value;})</script>
</body>
</html>

4.元旦倒计时

5.Python代码

import turtle as t
# -*- coding: UTF-8 -*-
x = -200
y = 100def txt():t1 = (x, y)t2 = (x + 12, y - 12)penSize = 5t.screensize(400, 400, "#fff")t.pensize(penSize)t.pencolor("#ff0000")t.speed(10)t.hideturtle()t.up()t.goto(t1)t.down()t.goto(t2)x1 = x - 18y1 = y - 22t3 = (x1, y1)t4 = (x1 + 60, y1)t.up()t.goto(t3)t.down()t.goto(t4)x2 = x1 + 16y2 = y1 - 10t5 = (x2, y2)t6 = (x2 + 8, y2 - 16)t7 = (x2 + 26, y2)t8 = (x2 + 18, y2 - 18)t.up()t.goto(t5)t.down()t.goto(t6)t.up()t.goto(t7)t.down()t.goto(t8)x3 = x1 - 15y3 = y2 - 24t9 = (x3, y3)t10 = (x3 + 90, y3)t.up()t.goto(t9)t.down()t.goto(t10)x4 = x3 + 10y4 = y3 - 22t11 = (x4, y4)t12 = (x4 + 70, y4)t.up()t.goto(t11)t.down()t.goto(t12)x5 = x + 12y5 = y3t13 = (x5, y5)t14 = (x5, y5 - 90)t.up()t.goto(t13)t.down()t.goto(t14)x6 = x5y6 = y5 - 90t15 = (x6 - 12, y6 + 10)t.goto(t15)x7 = x6 - 12y7 = y5 - 40t16 = (x7, y7)t17 = (x7 - 8, y7 - 20)t.up()t.goto(t16)t.down()t.goto(t17)t18 = (x7 + 24, y7 - 5)t19 = (x7 + 30, y7 - 16)t.up()t.goto(t18)t.down()t.goto(t19)x8 = x + 100y8 = y - 10t20 = (x8, y8)t21 = (x8 - 32, y8 - 20)t.up()t.goto(t20)t.down()t.goto(t21)t22 = (x8 - 40, y8 - 135)t.goto(t22)x9 = x3 + 100y9 = y3 - 8t23 = (x9, y9)t24 = (x9 + 50, y9)t.up()t.goto(t23)t.down()t.goto(t24)x10 = x9 + 24y10 = y9t25 = (x10, y10)t26 = (x10, y10 - 80)t.up()t.goto(t25)t.down()t.goto(t26)nian()kuai()le()t.done()def nian():x1 = x + 180y1 = y - 10t1 = (x1, y1)t2 = (x1 - 18, y1 - 28)t.up()t.goto(t1)t.down()t.goto(t2)x2 = x1 - 8y2 = y - 25t3 = (x2, y2)t4 = (x2 + 60, y2)t.up()t.goto(t3)t.down()t.goto(t4)x3 = x2 - 8y3 = y - 65t5 = (x3, y3)t6 = (x3 + 65, y3)t.up()t.goto(t5)t.down()t.goto(t6)x4 = x3y4 = y3 - 25t7 = (x4, y4)t.up()t.goto(t5)t.down()t.goto(t7)x5 = x4 - 10y5 = y4t8 = (x5, y5)t9 = (x5 + 85, y5)t.up()t.goto(t8)t.down()t.goto(t9)x6 = x2 + 25y6 = y2t10 = (x6, y6)t11 = (x6, y6 - 120)t.up()t.goto(t10)t.down()t.goto(t11)def kuai():x1 = x + 280y1 = y - 65t1 = (x1, y1)t2 = (x1 - 6, y1 - 25)t.up()t.goto(t1)t.down()t.goto(t2)x2 = x1 + 10y2 = y - 15t3 = (x2, y2)t4 = (x2, y2 - 130)t.up()t.goto(t3)t.down()t.goto(t4)x3 = x2 + 10y3 = y1 - 8t5 = (x3, y3)t6 = (x3 + 6, y3 - 10)t.up()t.goto(t5)t.down()t.goto(t6)x4 = x3 + 25y4 = y - 60t7 = (x4, y4)t8 = (x4 + 60, y4)t9 = (x4 + 60, y4 - 28)t.up()t.goto(t7)t.down()t.goto(t8)t.goto(t9)x5 = x4 - 10y5 = y4 - 28t10 = (x5, y5)t11 = (x5 + 90, y5)t.up()t.goto(t10)t.down()t.goto(t11)x6 = x4 + 30y6 = y2 - 5t12 = (x6, y6)t13 = (x6 - 18, y6 - 125)t.up()t.goto(t12)t.down()t.goto(t13)x7 = x6 + 8y7 = y5 - 20t14 = (x7, y7)t15 = (x7 + 12, y7 - 38)t.up()t.goto(t14)t.down()t.goto(t15)def le():x1 = x + 510y1 = y - 20t1 = (x1, y1)t2 = (x1 - 65, y1 - 20)t3 = (x1 - 68, y1 - 60)t4 = (x1 + 10, y1 - 60)t.up()t.goto(t1)t.down()t.goto(t2)t.goto(t3)t.goto(t4)x2 = x1 - 30y2 = y1 - 35t5 = (x2, y2)t6 = (x2, y2 - 92)t7 = (x2 - 12, y2 - 85)t.up()t.goto(t5)t.down()t.goto(t6)t.goto(t7)x3 = x2 - 20y3 = y2 - 50t8 = (x3, y3)t9 = (x3 - 8, y3 - 20)t.up()t.goto(t8)t.down()t.goto(t9)t10 = (x3 + 40, y3 - 5)t11 = (x3 + 46, y3 - 16)t.up()t.goto(t10)t.down()t.goto(t11)def xin():t.title('Happy New Year')# t.hideturtle()t.getscreen().bgcolor('#f0f0f0')t.color('#c1e6c6', 'red')t.pensize(2)t.speed(1)t.up()t.goto(0, -150)t.down()# t.begin_fill()# t.goto(0, -150)t.goto(-175.12, -8.59)t.left(140)pos = []for i in range(19):t.right(10)t.forward(20)pos.append((-t.pos()[0], t.pos()[1]))for item in pos[::-1]:t.goto(item)t.goto(175.12, -8.59)t.goto(0, -150)t.left(50)t.end_fill()t.done()
# xin()
txt()

哪些曾经上过热搜的CSDN博客

1.双非渣本，他是如何逆袭拿到3W高薪
2.我把MySQL最核心的文件撸干净了
3.MySQL武林秘籍，SQL学废必过考试
4.Linux环境Oracle安装大全，呕心狂敲万字，绝对提升你的视野
5.IT行业考证规划，从年薪3万到30万

源码下载方式：
大家点赞、收藏、关注、评论啦、查看

新年Html动态特效祝福送给你相关推荐

计算机老师新年贺卡祝福语,新年贺卡祝老师祝福语精选
1.新年来了,小黄子在此给你拜年啦,新的一年诸事顺利,吉祥如意,大吉大利啊.2.送走旧年的时候,也送走一年的阴郁,迎来新春的时候,也迎来新的希望.给您拜年啦!3 [查看详细] 2018 老师新年贺卡祝 ...
【照片动态特效系列】旋转吧，照片！
[照片动态特效系列]旋转吧,照片! 实现"旋转" 核心-二维仿射变换基础旋转分块旋转多方向+彩图核彩图处理心部分主函数其他 by 今天不飞了突然就想做,然后就做了-- ...
祝女生节快乐的c语言,女生节祝福语：3月7日女生节到了，祝福送给娇滴滴的你...
1.祝所有的女同志:三围魔鬼化,收入白领化,家务甩手化,快乐日常化,爱情持久化,情调小资化,购物疯狂化,情人规模化,老公奴隶化;并祝妇女同胞 2.没有太阳,花朵不会开;没有爱,幸福不会来;没有妇女,也 ...
玻璃上的雨滴（动态特效）
玻璃上的雨滴(动态特效) 动态变化中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&g ...
HTML唯美雷姆时间动态特效网站源码+UI超好看
正文: HTML唯美雷姆时间动态特效网站源码,一个UI非常好看的时钟网页源码,是动态的,但是由于我没办法放GIF图片,所以大家只能自己去体验了,演示图就是上方那个就是. 程序: wwwu.lanzou ...
h5按钮css3动态特效,让页面静不下来
h5按钮css3动态特效,让页面静不下来在写一些h5页面的时候,难免会需要增加一些动态的效果.今天我来介绍一种,在按钮上添加动态效果的做法.保证让你瞒住,嘻嘻. 先看看效果图: 由于是动态而且颜色不 ...
OpenCV图片动态特效显示（三）-- 平移显示及拉伸显示效果
学更好的别人, 做更好的自己. --<微卡智享> 本文长度为2927字,预计阅读8分钟前言前两篇的特效已经实现了展开.渐显及马赛克的实现,今天来实现图像的平移效果及通过显示窗体的函数改 ...
今天无聊写了个自定义动态特效烟雾PHP源码
自定义设置的动态烟雾特效源码,很耐玩,,左侧可以暂停保存图片,挺有视觉感觉! ## 今天无聊写了个自定义动态特效烟雾PHP源码##蓝奏网盘下载**动态特效烟雾PHP源码.rar - 蓝奏云
炫酷星空个人主页动态特效引导页面浏览器源码手机自适应引导页HTML
炫酷星空个人主页动态特效引导页面浏览器源码手机自适应引导页HTML 效果: 完整版链接: https://pan.baidu.com/s/1DbGaiqB5-29uoVbPK0fxCw 提取码: ...

新年Html动态特效祝福送给你

前言