一、网站介绍
基于html+css+js制作的表白网页代码,可以直接替换文字和图片即可使用
二、作品效果
视频演示
https://live.csdn.net/v/embed/237733
(title-10-(生日快乐)蛋糕烟花+蓝色梦幻海洋3D相册)]
截图演示
在这里插入图片描述三、 作品代码
隣HTML代码
html><htmllang="en"><head><metacharset="UTF-8"/><title>情儿宝贝生日快乐title><linkrel="stylesheet"href="css/style2.css"/><style>style>head><body><audioid="audio_duration"autoplay><sourcesrc="mp3/birthday.mp3"/>audio><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><bokeh>bokeh><divclass="mobile">最大化查看div><divclass="pyro"><divclass="before">div><divclass="after">div>div><h2>情儿,生日快乐,爱你吆!h2><divclass="candle"><divid="flame"class="lit">div>div><divclass="cake">div><divclass="plate">div>body><script>varmyVid =document.getElementById("audio_duration");if(myVid !=null) {varduration;myVid.load();myVid.oncanplay =function(){console.log("myVid.duration", myVid.duration);console.log("myVid.duration*100", myVid.duration *1000);lettime =null;clearTimeout(time);time = setTimeout(function(){location.href ="photo_album.html";clearTimeout(time);}, myVid.duration *1000);};}script>html>
CSS代码
body{margin:0;padding:0;background:ffe;font-size:14px;font-family:微软雅黑,宋体,sans-serif;color:231F20;overflow:auto}a{color:000;font-size:14px;}main{width:100%;}wrap{position:relative;margin:0auto;width:1100px;height:680px;margin-top:10px;}text{width:400px;height:425px;left:60px;top:80px;position:absolute;}code{display:none;font-size:16px;}clock-box{position:absolute;left:60px;top:550px;font-size:28px;display:none;}clock-boxa{font-size:28px;text-decoration:none;}clock{margin-left:48px;}clock.digit{font-size:64px;}canvas{margin:0auto;width:1100px;height:680px;}error{margin:0auto;text-align:center;margin-top:60px;display:none;}.hand{cursor:pointer;}.say{margin-left:5px;}.space{margin-right:150px;}
四、更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库(持续更新中...)
【web学习指南】从web基础、计算机基础到前端常用框架的教程,涵盖前端大部分必备知识(学习指南 + 技术文章 + 资源分享)
Gitee仓库地址(来个Star吧~):https://gitee.com/zhanyuqiu2022/my-app
举报/反馈