如何制作生日祝福网页
1.如果没有html基础,就找个网页另存下来改改里边的html文字
2.如果有html基础,那就随你发挥了呗
你可能是不懂网页是怎样制作出来的,简单说,其实都是用代码和样式相结合,存成文件.html为后缀,放到浏览器里运行
怎样制作一个生日祝福网页
你可以先用PS软件设计出整体效果图,然后根据效果图进行切图,在保存的时候,直接保存为WEB格式,是图像和HTML文件的,最后你再用DW软件将某部分进行美化,制作,如果你嫌麻烦,也可以直接做个FLASH,这样效果会更流畅一些!
帮我提供一个‘祝你生日快乐’的html代码啊
前几天一个朋友找到我,他说他女朋友马上过生日,于是想问问我能不能写一个生日祝福代码。好兄弟的请求当然不能拒绝,直接安排!!
于是我用html写了一个简单的页面:点开后会显示来到这个世界多长时间和祝福话语,下滑后是自转相册(有背景音乐)。
原文链接:
html生日快乐代码
核心代码(不是完整代码):
#head
{
width:100%;
height:100%;
position:absolute;
-webkit-transform-style:preserve-3d;
-webkit-animation:donghua15slinear0sinfinite;
-moz-transform-style:preserve-3d;
-moz-animation:donghua15slinear0sinfinite;
-ms-transform-style:preserve-3d;
-ms-animation:donghua25slinear0sinfinite;
}
#headdiv
{
position:absolute;
top:0;
left:0;
width:300px;
height:400px;
border:1pxsolid#000
text-align:center;
line-height:100px;
}
#headdiv: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(vari=0;i<precision;i++){
varvector=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();
};
functionrender(a){
requestAnimationFrame(render);
hearts.push(newHeart())
ctx.clearRect(0,0,ww,wh);
for(vari=0;i<hearts.length;i++){
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=functionstarttime(){
time(h1,'2000,1,1');//出生时间
ptimer=setTimeout(starttime,1000);//添加计时器
}
functiontime(obj,futimg){
varnowtime=newDate().getTime();//现在时间转换为时间戳
varfutruetime=newDate(futimg).getTime();//未来时间转换为时间戳
varmsec=nowtime-futruetime;//毫秒未来时间-现在时间
vartime=(msec/1000);//毫秒/1000
varday=parseInt(time/86400);//天24*60*60*1000
varhour=parseInt(time/3600)-24*day;//小时60*60总小时数-过去的小时数=现在的小时数
varminute=parseInt(time%3600/60);//分-(day*24)以60秒为一整份取余剩下秒数秒数/60就是分钟数
varsecond=parseInt(time%60);//以60秒为一整份取余剩下秒数
obj.innerHTML="陈陈<br>你已经来到这个世界:<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"了<br><span>今日是你的生日,愿所有的快乐、所有的幸福、所有的温馨、所有的好运围绕在你身边。生日快乐!</span><p>下<br>滑<br>有<br>惊<br>喜</p>"
returntrue;
}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
效果如下:
这里面的文字可以自行修改,并且时间是会一直走动的,出生时间改成你女朋友的。
下滑后有自转照片:
照片可以自己换哦。
补充:
很多朋友想手机端打开文件,那就需要换图片的地址和音频的地址(你可以发一个仅自己可见的说说,然后就可以生成图片的链接地址了),此时只需要发html文件就可以用手机浏览器打开了。
上图的地址换成图片的链接网址(一共十个)。
对于音频文件,我这里提供一个链接(可能过期):https://www.0dutv.com/upload/dance/20200305/D1E8DB5EB16A57732BDD636C759DA034.mp3
上图的地址换成音频的链接网址。
大家可以网上找音乐外链。
如果是特定的音频录音,可以用这个方法:利用邮箱附件的形式,比如QQ邮箱,给自己发一封邮件,把音乐以附件的形式附带在上面,收信的时候用来下载附件的那个地址,就是歌曲的下载链接了。
完整项目:
里面有我自己找的十张照片和两个背景音乐(可以换成自己的录音),另外还有使用说明。
完整项目地址:html生日快乐代码