<html>
<head>
<title>xwt</title>
</head>
<style>
html, body{
height: 100%;
background: rgb(119,13,13);
margin: 0;
padding:0;
}
.middle{
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
user-select: none;
}
.label {
font-size: 2.2rem;
background: url("6368077651977322227241996.png");
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: moveBg 30s linear infinite;
}
@keyframes moveBg {
0% {
background-position: 0% 30%;
}
100% {
background-position: 1000% 500%;
}
}
canvas{
width: 100%;
height: 100%;
}
.c-o{
color: #d99c3b;
}
.content{
margin: 0 auto;
position: absolute;
top: 18%;
left: 10%;
width: 80%;
}
.fromWho{
text-align: right
}
</style>
<body>
<div class="middle">
<h1 class="label">Happy New Year</h1>
</div>
<!-- add -->
<div class="c-o content">
<div class="toWho">
我的学生们：
</div>
<div id="typed-strings">
<p>同学们节日快乐!</p>
<p>衷心的祝愿你在新的一年里,所有的期待都能出现,所有的梦想都能实现,所有的希望都能如愿,所有的付出都能兑现</p>
</div>
<span id="typed"></span>
<div class="fromWho">
向王涛
</div>
</div>
<!-- add end -->
</body>
<script>
class snowflake{
constructor(){
this.x = 0;
this.y = 0;
this.vx = 0;
this.vy = 0;
this.radius = 0;
this.alpha = 0;
this.reset()
}
reset(){
this.x = this.randBetween(0, window.innerWidth);
this.y = this.randBetween(0, -window.innerHeight);
this.vx = this.randBetween(-3, 3);
this.vy = this.randBetween(2, 5);
this.radius = this.randBetween(1, 4);
this.alpha = this.randBetween(0.1, 0.9);
}
randBetween(min, max){
return min + Math.random() * (max - min);
}
update(){
this.x = this.x + this.vx;
this.y = this.y + this.vy;
if(this.y + this.radius > window.innerHeight){
this.reset();
}
}
}
class snow{
constructor(){
this.canvas = document.createElement('canvas');
document.body.appendChild(this.canvas);
this.ctx = this.canvas.getContext('2d');
this.width = window.innerWidth;
this.height = window.innerHeight;
this.updateBound = () => {
this.update()
};
requestAnimationFrame(this.updateBound);
this.createSnowflakes();
}
createSnowflakes(){
const flakes = window.innerWidth / 4;
this.snowflakes = [];
for(let s = 0; s < flakes; s++){
this.snowflakes.push(new snowflake())
}
}
update(){
this.ctx.clearRect(0, 0, this.width, this.height);
for(let flake of this.snowflakes){
flake.update();
this.ctx.save();
this.ctx.fillStyle = '#FFF';
this.ctx.beginPath();
this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI*2);
this.ctx.closePath();
this.ctx.globalAlpha = flake.alpha;
this.ctx.fill();
this.ctx.restore();
}
requestAnimationFrame(this.updateBound)
}
}
new snow();
</script>
</html>
