帮我提供一个‘祝你生日快乐’的html代码啊

前几天一个朋友找到我，他说他女朋友马上过生日，于是想问问我能不能写一个生日祝福代码。好兄弟的请求当然不能拒绝，直接安排！！

于是我用html写了一个简单的页面：点开后会显示来到这个世界多长时间和祝福话语，下滑后是自转相册（有背景音乐）。

原文链接：

html生日快乐代码

核心代码（不是完整代码）：

#head

{

width:100%

height:100%

position: absolute

-webkit-transform-style: preserve-3d

-webkit-animation:donghua 15s linear 0s infinite

-moz-transform-style: preserve-3d

-moz-animation:donghua 15s linear 0s infinite

-ms-transform-style: preserve-3d

-ms-animation:donghua 25s linear 0s infinite

}

#head div

{

position: absolute

top:0

left:0

width:300px

height:400px

border:1px solid #000

text-align: center

line-height:100px

}

#head div:nth-child(1)

{

-webkit-transform:rotateY(0deg) translateZ(400px)

-moz-transform:rotateY(0deg) translateZ(400px)

-ms-transform:rotateY(0deg) translateZ(400px)

background:url(images/01.png)

background-size:cover

}12345678910111213141516171819202122232425262728293031

Heart.prototype.draw = function(){

this.size -= this.speedSize

this.x += this.speedX

this.y += this.speedY

ctx.save()

ctx.translate(-1000,this.y)

ctx.scale(this.size, this.size)

ctx.beginPath()

for (var i = 0i <precisioni++) {

var vector = this.vertices[i]

ctx.lineTo(vector.x, vector.y)

}

ctx.globalAlpha = this.size

ctx.shadowBlur = Math.round((3 - this.size) * 10)

ctx.shadowColor = "hsla(0, 100%, 60%,0.5)"

ctx.shadowOffsetX = this.x + 1000

ctx.globalCompositeOperation = "screen"

ctx.closePath()

ctx.fill()

ctx.restore()

}

function render(a){

requestAnimationFrame(render)

hearts.push(new Heart())

ctx.clearRect(0,0,ww,wh)

for (var i = 0i <hearts.lengthi++) {

hearts[i].draw()

if(hearts[i].size <= 0){

hearts.splice(i,1)

i--

}

}

}

onResize()

window.addEventListener("mousemove", onMove)

window.addEventListener("touchmove", onMove)

window.addEventListener("resize", onResize)

requestAnimationFrame(render)

window.οnlοad=function starttime(){

time(h1,'2000,1,1')    // 出生时间

ptimer = setTimeout(starttime,1000)// 添加计时器

}

function time(obj,futimg){

var nowtime = new Date().getTime()// 现在时间转换为时间戳

var futruetime =  new Date(futimg).getTime()// 未来时间转换为时间戳

var msec = nowtime-futruetime// 毫秒 未来时间-现在时间

var time = (msec/1000) // 毫秒/1000

var day = parseInt(time/86400)// 天  24*60*60*1000

var hour = parseInt(time/3600)-24*day   // 小时 60*60 总小时数-过去的小时数=现在的小时数

var minute = parseInt(time%3600/60)// 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数

var second = parseInt(time%60) // 以60秒为一整份 取余 剩下秒数

obj.innerHTML="陈陈<br>你已经来到这个世界：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"了<br><span>今日是你的生日，愿所有的快乐、所有的幸福、所有的温馨、所有的好运围绕在你身边。生日快乐！</span><p>下<br>滑<br>有<br>惊<br>喜</p>"

return true

}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162

效果如下：

这里面的文字可以自行修改，并且时间是会一直走动的，出生时间改成你女朋友的。

下滑后有自转照片：

照片可以自己换哦。

补充：

很多朋友想手机端打开文件，那就需要换图片的地址和音频的地址（你可以发一个仅自己可见的说说，然后就可以生成图片的链接地址了），此时只需要发html文件就可以用手机浏览器打开了。

上图的地址换成图片的链接网址（一共十个）。

对于音频文件，我这里提供一个链接（可能过期）：https://www.0dutv.com/upload/dance/20200305/D1E8DB5EB16A57732BDD636C759DA034.mp3

上图的地址换成音频的链接网址。

大家可以网上找音乐外链。

如果是特定的音频录音，可以用这个方法：利用邮箱附件的形式，比如QQ邮箱，给自己发一封邮件，把音乐以附件的形式附带在上面，收信的时候用来下载附件的那个地址，就是歌曲的下载链接了。

完整项目：

里面有我自己找的十张照片和两个背景音乐（可以换成自己的录音），另外还有使用说明。

完整项目地址：html生日快乐代码

你可以先用PS软件设计出整体效果图，然后根据效果图进行切图，在保存的时候，直接保存为WEB格式，是图像和HTML文件的，最后你再用DW软件将某部分进行美化，制作，如果你嫌麻烦，也可以直接做个FLASH，这样效果会更流畅一些！

---