前言
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 = 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()
哪些曾經上過熱搜的CSDN博客
1.雙非渣本，他是如何逆襲拿到3W高薪
2.我把MySQL最核心的檔案擼干凈了
3.MySQL武林秘籍，SQL學廢必過考試
4.Linux環境Oracle安裝大全，嘔心狂敲萬字，絕對提升你的視野
5.IT行業考證規劃，從年薪3萬到30萬
原始碼下載方式：
大家點贊、收藏、關注、評論啦 、查看👇🏻👇🏻👇🏻微信公眾號獲取👇🏻👇🏻👇🏻
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/393984.html
標籤：其他
上一篇：【每天一個java設計模式（完）】 - 四萬字實作23種設計模式（附示例原始碼）
下一篇：C#復習筆記