热门标签
热门文章
- 1Educational Codeforces Round 100 (Rated for Div. 2) 虚拟参赛及补题。_codeforces虚拟赛加rate吗?
- 2计算机二级C语言学习笔记（二）_c语言可以指定实数小数位的宽度吗
- 3Linux 网络配置及基础服务
- 4MATLAB概率密度函数估计_matlab中概率密度函数
- 5Java 中的双冒号“::”_java ::
- 6如何构建多种系统架构支持的 Docker 镜像
- 7Java实现-两两交换链表中的节点_java 递归实现 两两交换链表的节点
- 8spring-boot jpa 配置两个数据源_jpa 一个类中设置两个不同的数据源 查询相同的表
- 9[附源码]Python计算机毕业设计Django微信点餐系统_python点餐系统的设计思路及关键技术
- 10web网页设计—— 中国餐饮协会(HTML+CSS)_网页设计代码案例
当前位置: article > 正文
新年Html动态特效祝福送给你_新年祝福动画代码
作者：繁依Fanyi0 | 2024-02-15 15:01:17
赞
踩
新年祝福动画代码
前言
2021年马上结束了，不管这一年经历了什么，付出和收获了什么， 只能挥手和2021告别了。但愿这一年的经历，能让我们更好的把握未来的时间， 把握即将到来的2022年。值此元旦来临之际， 本人制作了一个HTML5特效，预祝各位新年快乐，在2022年美梦成真！ 文末送出了哪些曾经上过热搜的CSDN博客1.数字爱心
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,
每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的.
- 1
- 2
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
4.元旦倒计时
5.Python代码
import turtle as t # -*- coding: UTF-8 -*- x = -200 y = 100 def txt(): t1 = (x, y) t2 = (x + 12, y - 12) penSize = 5 t.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 - 18 y1 = y - 22 t3 = (x1, y1) t4 = (x1 + 60, y1) t.up() t.goto(t3) t.down() t.goto(t4) x2 = x1 + 16 y2 = y1 - 10 t5 = (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 - 15 y3 = y2 - 24 t9 = (x3, y3) t10 = (x3 + 90, y3) t.up() t.goto(t9) t.down() t.goto(t10) x4 = x3 + 10 y4 = y3 - 22 t11 = (x4, y4) t12 = (x4 + 70, y4) t.up() t.goto(t11) t.down() t.goto(t12) x5 = x + 12 y5 = y3 t13 = (x5, y5) t14 = (x5, y5 - 90) t.up() t.goto(t13) t.down() t.goto(t14) x6 = x5 y6 = y5 - 90 t15 = (x6 - 12, y6 + 10) t.goto(t15) x7 = x6 - 12 y7 = y5 - 40 t16 = (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 + 100 y8 = y - 10 t20 = (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 + 100 y9 = y3 - 8 t23 = (x9, y9) t24 = (x9 + 50, y9) t.up() t.goto(t23) t.down() t.goto(t24) x10 = x9 + 24 y10 = y9 t25 = (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 + 180 y1 = y - 10 t1 = (x1, y1) t2 = (x1 - 18, y1 - 28) t.up() t.goto(t1) t.down() t.goto(t2) x2 = x1 - 8 y2 = y - 25 t3 = (x2, y2) t4 = (x2 + 60, y2) t.up() t.goto(t3) t.down() t.goto(t4) x3 = x2 - 8 y3 = y - 65 t5 = (x3, y3) t6 = (x3 + 65, y3) t.up() t.goto(t5) t.down() t.goto(t6) x4 = x3 y4 = y3 - 25 t7 = (x4, y4) t.up() t.goto(t5) t.down() t.goto(t7) x5 = x4 - 10 y5 = y4 t8 = (x5, y5) t9 = (x5 + 85, y5) t.up() t.goto(t8) t.down() t.goto(t9) x6 = x2 + 25 y6 = y2 t10 = (x6, y6) t11 = (x6, y6 - 120) t.up() t.goto(t10) t.down() t.goto(t11) def kuai(): x1 = x + 280 y1 = y - 65 t1 = (x1, y1) t2 = (x1 - 6, y1 - 25) t.up() t.goto(t1) t.down() t.goto(t2) x2 = x1 + 10 y2 = y - 15 t3 = (x2, y2) t4 = (x2, y2 - 130) t.up() t.goto(t3) t.down() t.goto(t4) x3 = x2 + 10 y3 = y1 - 8 t5 = (x3, y3) t6 = (x3 + 6, y3 - 10) t.up() t.goto(t5) t.down() t.goto(t6) x4 = x3 + 25 y4 = y - 60 t7 = (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 - 10 y5 = y4 - 28 t10 = (x5, y5) t11 = (x5 + 90, y5) t.up() t.goto(t10) t.down() t.goto(t11) x6 = x4 + 30 y6 = y2 - 5 t12 = (x6, y6) t13 = (x6 - 18, y6 - 125) t.up() t.goto(t12) t.down() t.goto(t13) x7 = x6 + 8 y7 = y5 - 20 t14 = (x7, y7) t15 = (x7 + 12, y7 - 38) t.up() t.goto(t14) t.down() t.goto(t15) def le(): x1 = x + 510 y1 = y - 20 t1 = (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 - 30 y2 = y1 - 35 t5 = (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 - 20 y3 = y2 - 50 t8 = (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()
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
哪些曾经上过热搜的CSDN博客
1.双非渣本，他是如何逆袭拿到3W高薪
2.我把MySQL最核心的文件撸干净了
3.MySQL武林秘籍，SQL学废必过考试
4.Linux环境Oracle安装大全，呕心狂敲万字，绝对提升你的视野
5.IT行业考证规划，从年薪3万到30万
源码下载方式：
大家点赞、收藏、关注、评论啦 、查看
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/85184
推荐阅读
相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
