時(shí)間：2023-07-23 08:27:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-23 08:27:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
師妹直呼“這也太哇塞了吧“ ?520七夕情人節(jié)表白網(wǎng)頁(yè)制作?(HTML+CSS+JavaScript)：
在線(xiàn)咨詢(xún)
1.網(wǎng)頁(yè)作品簡(jiǎn)介方面 ：520?七夕情人節(jié)?告白網(wǎng)頁(yè)HTML ,喜歡的可以下載，文章頁(yè)支持手機(jī)PC響應(yīng)式布局?？芍苯犹鎿Q相片就能用噢!2.網(wǎng)頁(yè)作品編輯方面：此作品為七夕情人節(jié)告白網(wǎng)頁(yè)設(shè)計(jì)題材，代碼華麗炫酷 HTML+CSS+JavaScript 布局制作，作品下載后可使用任意HTML編輯軟件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有編輯器均可使用）3.網(wǎng)頁(yè)作品技術(shù)方面：使用CSS制作了炫酷星星閃動(dòng)亮點(diǎn)、鼠標(biāo)可拖拽圖片滑動(dòng)效果、同時(shí)使用JavaScript自動(dòng)切換背景圖片多漸變顏色效果 (可自定義更換)、HTML添加了背景音樂(lè)(可自定義更換),。 背景音樂(lè) / 虛幻背景 / 自動(dòng)輪播相冊(cè) /，背景音樂(lè)也可以弄成你想說(shuō)的話(huà)，或者自己唱的歌。這樣也是很不錯(cuò)的。如需更換mp3背景音樂(lè),可自行下載后并找到mp3 文件夾 更換即可~ 戳我>>>免費(fèi)下載MP3 注意: 下載后的音樂(lè)文件需要修改名稱(chēng) 和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 --> <!-- 音樂(lè) --> <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>準(zhǔn)備好17張相片(可以自定義 10-199張) 相冊(cè)替換: 找到 img 文件夾 替換相片即可 注意: 相片后綴為.jpg 199是需要生成相片的數(shù)量 , Math.round(Math.random() * 17 是隨機(jī)17張 // 生成虛擬數(shù)據(jù)-修改后新生成虛擬數(shù)據(jù)- 自動(dòng)查找static/image 中的圖片 遍歷添加進(jìn)去 for (var i = 0; i < 199; i++) { personArray.push({ image: './static/image/' + Math.round(Math.random() * 17) + '.jpg' });}卡片-模擬相片推送數(shù)據(jù)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文件夾下的背景圖, 或者添加你想要的背景圖片會(huì)即可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); // 表格需要坐標(biāo)進(jìn)行排序的 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(); // 參數(shù)一 圈的大小 參數(shù)二 左右間距 參數(shù)三 上下間距 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調(diào)整 片間距 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); // 鼠標(biāo)控制 controls = new THREE.TrackballControls(camera, renderer.domElement); controls.rotateSpeed = 0.5; controls.minDistance = 500; controls.maxDistance = 6000; controls.addEventListener('change', render); // 自動(dòng)更換 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前端 零基礎(chǔ)-入門(mén)到高級(jí) (視頻+源碼+開(kāi)發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程) 適合入門(mén)到高級(jí)的童鞋們?nèi)胧謣送1000套HTML+CSS+JavaScript模板網(wǎng)站 [點(diǎn)贊+好評(píng)+收藏] 三連 支持下吧，你的「點(diǎn)贊，好評(píng)，收藏」是我創(chuàng)作的動(dòng)力。關(guān)注我 ~ 每天帶你學(xué)習(xí) :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！關(guān)注↓公Z號(hào) 獲取更多源碼 !關(guān)鍵詞：表白,七夕
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
