基于js的贺国庆网页制作_国庆节网页设计模板以及源代码

贺国庆网页
使用HTML+CSS+JS简单实现的贺国庆单页面~

主要有三部分：
1.顶部的音频播放器，一进网页要让饮品播放的要在网站设置找到声音设置成允许，如下图：


2.祝福语的打字效果
主要代码：
(js部分）

<script>
  let divTyping = document.getElementById('text')
  let i = 0,
    timer = -100,
    str = '神州奋起，国家繁荣；山河壮丽，岁月峥嵘；江山不老，祖国常春！'

  function typing () {
    if (i <= str.length) {
      divTyping.innerHTML = str.slice(0, i++) + '_'
      timer = setTimeout(typing, 400)
    }
    else {
      divTyping.innerHTML = str//结束打字,移除 _ 光标
      clearTimeout(timer)
    }
  }

  typing()
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#text{
  font-size:5.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top:30px;
  line-height: 100px;
  color: #f35626;
font-family: 楷体;
text-shadow: 0px 1px 0px rgb(255, 0, 0), 0px 2px 0px rgb(17, 44, 129), 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
background-image: -webkit-linear-gradient(92deg, #ff0000, #7e2e96);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 10s infinite linear;
}
@-webkit-keyframes hue {
from {

-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
-moz-filter: hue-rotate(-360deg);
}
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

3.爱心飘起动画

var canvas = document.getElementById("cavs");
const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;
canvas.setAttribute("width", WIDTH);
canvas.setAttribute("height", HEIGHT);
var context = canvas.getContext("2d");
var start =

{
    loves: [],
    DURATION: 30,
    begin: function()
    {
        this.createLove();
    },
    createLove: function()
    {
        for (var i = 0; i < WIDTH / 59; i++)
        {
            var love = new Love();
            this.loves.push(love);
        }
        setInterval(this.drawLove.bind(this), this.DURATION);
    },
    drawLove: function()
    {
        context.clearRect(0, 0, WIDTH, HEIGHT);
        for (var key in this.loves)
        {
            this.loves[key].draw();
        }
    }
}
function Love()
{
    var me = this;
    function rand() 
    {
        me.maxScale = (Math.random() * 3.2 + 1.2) * WIDTH / 521;
        me.curScale = 1.2 * WIDTH / 521;
        me.x = Math.floor(Math.random() * WIDTH - 40);
        me.y = Math.floor(HEIGHT - Math.random() * 200);
        me.ColR = Math.floor(Math.random() * 255);
        me.ColG = Math.floor(Math.random() * 255);
        me.ColB = Math.floor(Math.random() * 255);
        me.alpha = Math.random() * 0.2 + 0.8;
        me.vector = Math.random() * 5 + 0.4;
    }
    (function(){rand();} ());
    me.draw = function()
    {
        if (me.alpha < 0.01) rand();
        if(me.curScale < me.maxScale) me.curScale += 0.2;
        x = me.x;
        y = me.y;
        scale = me.curScale;
        context.fillStyle = "rgba(" + me.ColR + "," + me.ColG + "," + me.ColB + "," + me.alpha + ")";
        context.shadowBlur = 10;
        context.shadowColor = "rgb(" + me.ColR + "," + me.ColG + "," + me.ColB + ")";
        context.beginPath();
        context.bezierCurveTo( x + 2.5*scale, y + 2.5*scale, x + 2.0*scale, y, x, y );
        context.bezierCurveTo( x - 3.0*scale, y, x - 3.0*scale, y + 3.5*scale,x - 3.0*scale,y + 3.5*scale );
        context.bezierCurveTo( x - 3.0*scale, y + 5.5*scale, x - 1.0*scale, y + 7.7*scale, x + 2.5*scale, y + 9.5*scale );
        context.bezierCurveTo( x + 6.0*scale, y + 7.7*scale, x + 8.0*scale, y + 5.5*scale, x + 8.0*scale, y + 3.5*scale );
        context.bezierCurveTo( x + 8.0*scale, y + 3.5*scale, x + 8.0*scale, y, x + 5.0*scale, y );
        context.bezierCurveTo( x + 3.5*scale, y, x + 2.5*scale, y + 2.5*scale, x + 2.5*scale, y + 2.5*scale );
        context.fill();
        context.closePath();
        me.y -= me.vector;
        me.alpha -= (me.vector / 2.9 * 3.5 / HEIGHT);
    }
}
window.onload = function()
{
    start.begin();
}
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

页面展示点击(建议pc端打开）：
贺国庆网页展示