师妹直呼"这也太哇塞了吧" ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)

520七夕节告白,也就是中国的情人节,你除了送花你还会什么？？快来制作高端大气上档次的表白网页吧

七夕节是一个十分浪漫的节日，相传牛郎织女每年农历七月七日会在鹊桥上相会，所以七夕是中国自古流传至今的情人节，在这一天如果你有喜欢的对象，不妨鼓起勇气表白哟。

作品介绍

1.网页作品简介方面 ：520❤七夕情人节❤告白网页HTML ,喜欢的可以下载，文章页支持手机PC响应式布局。可直接替换相片就能用噢!

2.网页作品编辑方面：此作品为七夕情人节告白网页设计题材，代码华丽炫酷 HTML+CSS+JavaScript 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品技术方面：使用CSS制作了炫酷星星闪动亮点、鼠标可拖拽图片滑动效果、同时使用JavaScript自动切换背景图片多渐变颜色效果 (可自定义更换)、HTML添加了背景音乐(可自定义更换),。

一、作品演示

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 -->
      <!-- 音乐 -->
    <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>

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 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);

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();
    // 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);

}