HTML实现生日快乐动态效果

最新推荐文章于 2024-04-10 01:27:04 发布

星染夜空

最新推荐文章于 2024-04-10 01:27:04 发布

阅读量3.6k

点赞数 24

文章标签： html 前端 javascript html5 css vscode

本文链接：https://blog.youkuaiyun.com/hexuhui0920/article/details/135468522

版权

一、创意效果介绍

运行代码会有烟花等特效，名字也可以随意修改

二、效果视频

生日快乐

三、设计代码

（1）HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>动态生日快乐</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  </head>
  <body>
    <!-- partial:index.partial.html -->
    <canvas id="c"></canvas>
    <!-- partial -->
    <script src="./script.js"></script>
  </body>
</html>

（2）CSS

canvas {
	position: absolute;
	top: 0;
	left: 0;
}
p {
	margin: 0 0;
	position: absolute;
	font: 16px Verdana;
	color: #eee;
	height: 25px;
	top: calc( 100vh - 30px );
	text-shadow: 0 0 2px white;
}
p a {
	text-decoration: none;
	color: #aaa;
}
span {
	font-size: 11px;
}
p > a:first-of-type {
	font-size: 20px;
}
body {
	overflow: hidden;
}

（3）JavaScript

var w = (c.width = window.innerWidth),
  h = (c.height = window.innerHeight),
  ctx = c.getContext("2d"),
  hw = w / 2, // half-width
  hh = h / 2,
  sentenceIndex = 0,
  opts = {
    get strings() {
      const sentences = [
        ["HAPPY", "BIRTHDAY!"],
        ["星染夜空", "生日快乐！"],
      ];

      return sentences[sentenceIndex++ % sentences.length];
    },
    charSize: 30,
    charSpacing: 35,
    lineHeight: 40,

    cx: w / 2,
    cy: h / 2,

    fireworkPrevPoints: 10,
    fireworkBaseLineWidth: 5,
    fireworkAddedLineWidth: 8,
    fireworkSpawnTime: 200,
    fireworkBaseReachTime: 30,
    fireworkAddedReachTime: 30,
    fireworkCircleBaseSize: 20,
    fireworkCircleAddedSize: 10,
    fireworkCircleBaseTime: 30,
    fireworkCircleAddedTime: 30,
    fireworkCircleFadeBaseTime: 10,
    fireworkCircleFadeAddedTime: 5,
    fireworkBaseShards: 5,
    fireworkAddedShards: 5,
    fireworkShardPrevPoints: 3,
    fireworkShardBaseVel: 4,
    fireworkShardAddedVel: 2,
    fireworkShardBaseSize: 3,
    fireworkShardAddedSize: 3,
    gravity: 0.1,
    upFlow: -0.1,
    letterContemplatingWaitTime: 360,
    balloonSpawnTime: 20,
    balloonBaseInflateTime: 10,