师妹直呼"这也太哇塞了吧" ❤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模板网站
