时间：2023-07-23 08:27:01 | 来源：网站运营
时间：2023-07-23 08:27:01 来源：网站运营
师妹直呼“这也太哇塞了吧“ ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)：
在线咨询
1.网页作品简介方面 ：520❤七夕情人节❤告白网页HTML ,喜欢的可以下载，文章页支持手机PC响应式布局。可直接替换相片就能用噢!2.网页作品编辑方面：此作品为七夕情人节告白网页设计题材，代码华丽炫酷 HTML+CSS+JavaScript 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）3.网页作品技术方面：使用CSS制作了炫酷星星闪动亮点、鼠标可拖拽图片滑动效果、同时使用JavaScript自动切换背景图片多渐变颜色效果 (可自定义更换)、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 --> <!-- 音乐 --> <img id="music_ico" onclick="clickMusic()" src="static/image/music_ico.png" alt="" /> <audio id="audio" style="display: none" src="mp3/bg_music.mp3" preload="auto" loop="loop" ></audio>准备好17张相片(可以自定义 10-199张) 相册替换: 找到 img 文件夹 替换相片即可 注意: 相片后缀为.jpg 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 animate var 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);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; }}function init() { camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 3000; scene = new THREE.Scene(); // table for (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); } // sphere var 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); } // helix var 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); } // grid for (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前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关注↓公Z号 获取更多源码 !关键词：表白,七夕
