师妹直呼"这也太哇塞了吧" ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
520七夕节告白,也就是中国的情人节,你除了送花你还会什么？？ 快来制作高端大气上档次的表白网页吧
七夕节是一个十分浪漫的节日，相传牛郎织女每年农历七月七日会在鹊桥上相会，所以七夕是中国自古流传至今的情人节，在这一天如果你有喜欢的对象，不妨鼓起勇气表白哟。
作品介绍
1.网页作品简介方面：520❤七夕情人节❤告白网页HTML ,喜欢的可以下载，文章页支持手机PC响应式布局。可直接替换相片就能用噢!
2.网页作品编辑方面：此作品为七夕情人节告白网页设计题材，代码华丽炫酷 HTML+CSS+JavaScript 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm所有编辑器均可使用）
3.网页作品技术方面：使用CSS制作了炫酷星星闪动亮点、鼠标可拖拽图片滑动效果、同时使用JavaScript自动切换背景图片多渐变颜色效果 (可自定义更换)、HTML添加了背景音乐(可自定义更换),。
文章目录
师妹直呼"这也太哇塞了吧" ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)作品介绍一、作品演示1.PC端电脑端(演示)>>>点击进入>>>100款❤表白源码演示地址1.❤照片球2.❤螺旋照片3.❤照片墙4.❤满屏相片5.❤整齐排列2.H5手机端(演示)二、代码目录三、代码实现 (教程)html相册星空3D相册(制作)css 星空Javascript 自动切换模式(部分)四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)五、源码获取六、更多告白源码一、作品演示
1.PC端电脑端(演示)
>>>点击进入>>>100款❤表白源码演示地址
1.❤照片球
2.❤螺旋照片
3.❤照片墙
4.❤满屏相片
5.❤整齐排列
2.H5手机端(演示)
二、代码目录
三、代码实现 (教程)
1.这个单页面源码，是一位程序员精心为女朋友而制作的，有需要的朋友就可以修改下源码就可以送给心爱的她一个不一样的虚拟礼物了。
2.整个布局很不错，手机端和电脑端显示都很好，我也很喜欢，添加了背景音乐 / 虚幻背景 / 自动轮播相册 /，背景音乐也可以弄成你想说的话，或者自己唱的歌。这样也是很不错的。
html相册星空
音乐替换:如需更换mp3背景音乐,可自行下载后并找到mp3 文件夹 更换即可~戳我>>>免费下载MP3
注意:下载后的音乐文件需要修改名称 和mp3文件夹里的mp3文件 的名字保持一致即可
<div style="position:fixed;width: 100%;height:100%;top:0; z-index:-1;"><div id="background" class="wall"></div><div id="midground" class="wall"></div><div id="foreground" class="wall"></div><div id="top" class="wall"></div></div><!-- 背景E --><!-- 音乐 --><imgid="music_ico"onclick="clickMusic()"src="static/image/music_ico.png"alt=""/><audioid="audio"style="display: none"src="mp3/bg_music.mp3"preload="auto"loop="loop"></audio>
3D相册(制作)
制作教程:准备好17张相片(可以自定义 10-199张)
相册替换:找到 img 文件夹 替换相片即可
注意:相片后缀为.jpg
生成多张相片找到 js文件下的 functions.js 文件 找到46行:199是需要生成相片的数量 , Math.round(Math.random() * 17 是随机17张
// 生成虚拟数据-修改后新生成虚拟数据- 自动查找static/image 中的图片 遍历添加进去 for (var i = 0; i < 199; i++) {personArray.push({image: './static/image/' + Math.round(Math.random() * 17) + '.jpg'});}
卡片-模拟相片推送数据
var img = document.getElementById('showImg')var s = setInterval(function() {// get animatevar rand_in = parseInt(Math.random() * _in.length, 10);var rand_out = parseInt(Math.random() * _out.length, 10);if (CurPersonNum >= personArray.length) {CurPersonNum = 0;}$('.show_info').show();$('.show_info').addClass(_in[rand_in]);setTimeout(function() {$('.show_info').removeClass(_in[rand_in]);++CurPersonNum;setTimeout(function() {$('.show_info').addClass(_out[rand_out]);setTimeout(function() {$('.show_info').removeClass(_out[rand_out]);$('.show_info').hide();// 更改展示的图片 img.setAttribute('src', './static/image/' +Math.round(Math.random() * 17) + '.jpg');}, 1000);}, 1000);}, 1000);}, 4500);
css 星空
这段代码background: url("../bgimg/bg8.jpg") no-repeat;为第一次显示的背景图 可自行更换
更换教程:需要找到bgimg文件夹下的背景图, 或者添加你想要的背景图片会即可
html,body {margin: 0;padding: 0;}audio {position: absolute;bottom: 0;opacity: 0.1;-webkit-transition: all 2s;-moz-transition: all 2s;-ms-transition: all 2s;-o-transition: all 2s;transition: all 2s;}div#background {background: url("../bgimg/bg8.jpg") no-repeat;-webkit-animation: dd 100s linear infinite;-moz-animation: dd 100s linear infinite;-o-animation: dd 100s linear infinite;animation: dd 100s linear infinite;}div#midground {background: url("../bgimg/midground.png");z-index: 1;-webkit-animation: cc 100s linear infinite;-moz-animation: cc 100s linear infinite;-o-animation: cc 100s linear infinite;animation: cc 100s linear infinite;}div#foreground {background: url("../bgimg/foreground.png");-webkit-animation: cc 153s linear infinite;-o-animation: cc 153s linear infinite;-moz-animation: cc 153s linear infinite;animation: cc 153s linear infinite;}@-webkit-keyframes cc {from {background-position: 0 0;}to {background-position: 600% 0;}}@-o-keyframes cc {from {background-position: 0 0;transform: translateY(105px);}to {background-position: 600% 0;}}
Javascript 自动切换模式(部分)
function init() {camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);camera.position.z = 3000;scene = new THREE.Scene();// tablefor (var i = 0; i < table.length; i++) {var element = document.createElement('div');element.className = 'element';element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';var img = document.createElement('img');img.src = table[i].image;element.appendChild(img);var object = new THREE.CSS3DObject(element);object.position.x = Math.random() * 4000 - 2000;object.position.y = Math.random() * 4000 - 2000;object.position.z = Math.random() * 4000 - 2000;scene.add(object);objects.push(object);// 表格需要坐标进行排序的var object = new THREE.Object3D();// object.position.x = ( table[ i + 3 ] * 140 ) - 1330;// object.position.y = - ( table[ i + 4 ] * 180 ) + 990;object.position.x = (table[i].p_x * 140) - 1330;object.position.y = -(table[i].p_y * 180) + 990;targets.table.push(object);}// spherevar vector = new THREE.Vector3();var spherical = new THREE.Spherical();for (var i = 0, l = objects.length; i < l; i++) {var phi = Math.acos(-1 + (2 * i) / l);var theta = Math.sqrt(l * Math.PI) * phi;var object = new THREE.Object3D();spherical.set(800, phi, theta);object.position.setFromSpherical(spherical);vector.copy(object.position).multiplyScalar(2);object.lookAt(vector);targets.sphere.push(object);}// helixvar vector = new THREE.Vector3();var cylindrical = new THREE.Cylindrical();for (var i = 0, l = objects.length; i < l; i++) {var theta = i * 0.175 + Math.PI;var y = -(i * 5) + 450;var object = new THREE.Object3D();// 参数一 圈的大小 参数二 左右间距 参数三 上下间距cylindrical.set(900, theta, y);object.position.setFromCylindrical(cylindrical);vector.x = object.position.x * 2;vector.y = object.position.y;vector.z = object.position.z * 2;object.lookAt(vector);targets.helix.push(object);}// gridfor (var i = 0; i < objects.length; i++) {var object = new THREE.Object3D();object.position.x = ((i % 5) * 400) - 800; // 400 图片的左右间距 800 x轴中心店object.position.y = (-(Math.floor(i / 5) % 5) * 300) + 500; // 500 y轴中心店object.position.z = (Math.floor(i / 25)) * 200 - 800; // 300调整 片间距 800z轴中心店targets.grid.push(object);}//渲染renderer = new THREE.CSS3DRenderer();renderer.setSize(window.innerWidth, window.innerHeight);renderer.domElement.style.position = 'absolute';document.getElementById('container').appendChild(renderer.domElement);// 鼠标控制controls = new THREE.TrackballControls(camera, renderer.domElement);controls.rotateSpeed = 0.5;controls.minDistance = 500;controls.maxDistance = 6000;controls.addEventListener('change', render);// 自动更换var ini = 0;setInterval(function() {ini = ini >= 3 ? 0 : ini;++ini;switch (ini) {case 1:transform(targets.sphere, 1000);break;case 2:transform(targets.helix, 1000);break;case 3:transform(targets.grid, 1000);break;}}, 10000);}
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉1.看到这里了就[点赞+好评+收藏] 三连支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号获取更多源码 !
六、更多告白源码
1.❤100款 html+css+JavaScript 表白源码演示地址
2.❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
3. 一行代码教你撩妹手到擒来~html+css+js烟花告白3D相册(含音乐+可自定义文字)
4. ❤520给她准备的情人节礼物~html+css+javascript漫天飞雪3D相册(含音乐)
5. ❤520情人节陪她一起看流星雨~html+css+javascript制作流星雨3D相册(含音乐)
6. html+css+js生日快乐网站模板 (520/七夕情人节/告白/求婚/生日快乐) 含背景音乐
7. html+css+js生日快乐~程序员专属的生日快乐html模板(含生日背景音乐)
8. ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
9. 我是如何用一行代码表白学妹❤520情人节送女朋友的3D樱花雨相册礼物❤(程序员表白专属)
10. 七夕情人节~html+css+javascript实现满屏爱心特效(程序员表白)
11. 七夕情人节送花告白动画(HTML+CSS+JavaScript)
12. html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)
13. html+css+javascript制作爱心表白代码(520/七夕情人节/告白/生日礼物)
14. 超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节
15. html+css+javascript实现100款超炫酷告白源码(520/七夕/告白/求婚/脱单)程序员必备
16. html+css+javascript实现520告白爱情树(含音乐)程序员表白必备
17. html+css+javaScript实现炫酷烟花表白(云雾状粒子文字3D开场)
18. 程序员520告白Html+Js+Css花瓣相册网页模板❤程序员表白必备
19. html+css+javascript实现乾坤八卦风水罗盘时钟 (免费附源码)
20. html+css+javascript实现抖音超火罗盘时钟 (免费附源码)
21. 抖音超火JavaScript实现网红太空人表盘 ~看程序员是如何用代码做华为太空手表
22. html+css+js绘制冬季下雪3D相册(520情人节/七夕情人节/程序员表白html代码)
23. 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)
24. html+css+js制作520表白网页，全屏的爱心和表白语网页动画代码，浪漫的520爱心表白动画特效。
25. 520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)
26. Html5浪漫结婚请柬婚礼网站模板❤_爱她就给她最美的H5婚礼请柬_(婚庆电子邀请函)含背景音乐
27. html+css+javascript满屏雪花爱心520表白网站 (含音乐)520告白/七夕情人节/生日礼物/程序员表白必备
28. 520七夕情人节代码给女朋友送了一个礼物~html+css+javascript实现樱花爱心相册「可以拿去送给自己喜欢的人」
29. 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
30. html+css+javascript生日快乐烟花 ❤520/表白/七夕情人节/求婚❤专用(自定义文字)
31.一行代码教你七夕情人节如何告白—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
32.HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)
33.送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)
34.HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤
