首页 > 编程语言> > 送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)

送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)

2021-07-21 16:01:18 作者：互联网

❉ 送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)

一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了，来制作属于我们程序员的浪漫吧！

❉ 文章目录

❉ 送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)
❉ 效果演示
- ❉ 1.动态效果
- ❉ 2.静态效果
❉ 代码文件目录
一、文字修改(代码实现)
二、歌曲mp3更换教程(教程)
三、前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
四、❉ 源码获取
五、❉更多表白源码
六、❉150套Echarts大数据可视化
七、❉更多作品文章

❉ 效果演示

❤100款 html+css+JavaScript 表白源码演示地址

❉ 1.动态效果

在这里插入图片描述

❉ 2.静态效果

示例：鼠标移出3D相册自动旋转不展开
在这里插入图片描述
示例：鼠标移入旋转3D相册展开伴随雪花~效果非常漂亮

❉ 代码文件目录

在这里插入图片描述

一、文字修改(代码实现)

示例：找到index.html文件,只需要修改文字就行
示例：图片大小: 大图400px400px 小图是 100px100px 3D图片修改教程

在这里插入图片描述

HTML (文字部分)

     <div class="cs">
        <img src="http://web.tanganbin.cn/biaobai_shengdan/picture/tx.jpg" id="logo">
        <br><br><br>
        <h1 style=" color:#3FF">❤2021.5.20与你相爱 1314天~</h1>
        <h2 style=" color:#3FF">祝你享尽七夕情人节的快乐和喜悦。</h2>
        <!-- 相册 S -->
        <div class="box">
            <ul class="minbox">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ol class="maxbox">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
    <div id="MagicFace" style="position: absolute; z-index: 999;">
        <script src="js/christmas.js"></script>
    </div>

JS (雪花部分)

     <script type="text/javascript">
        var SCREEN_WIDTH = window.innerWidth;
        var SCREEN_HEIGHT = window.innerHeight;
        var container;
        var particle;
        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;
        var particles = [];
        var particleImage = new Image(); //THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
        particleImage.src = 'images/ParticleSmoke.png';
        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);

            camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
            camera.position.z = 1000;

            scene = new THREE.Scene();
            scene.add(camera);
            renderer = new THREE.CanvasRenderer();
            renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
            var material = new THREE.ParticleBasicMaterial({
                map: new THREE.Texture(particleImage)
            });
            for (var i = 0; i < 500; i++) {
                particle = new Particle3D(material);
                particle.position.x = Math.random() * 2000 - 1000;
                particle.position.y = Math.random() * 2000 - 1000;
                particle.position.z = Math.random() * 2000 - 1000;
                particle.scale.x = particle.scale.y = 1;
                scene.add(particle);

                particles.push(particle);
            }
            container.appendChild(renderer.domElement);
            document.addEventListener('mousemove', onDocumentMouseMove, false);
            document.addEventListener('touchstart', onDocumentTouchStart, false);
            document.addEventListener('touchmove', onDocumentTouchMove, false);
            setInterval(loop, 1000 / 60);
        }


        function loop() {
            for (var i = 0; i < particles.length; i++) {
                var particle = particles[i];
                particle.updatePhysics();

                with(particle.position) {
                    if (y < -1000) y += 2000;
                    if (x > 1000) x -= 2000;
                    else if (x < -1000) x += 2000;
                    if (z > 1000) z -= 2000;
                    else if (z < -1000) z += 2000;
                }
            }
            renderer.render(scene, camera);
        }
    </script>

CSS(相册部分)

     .minbox li:nth-child(1) {
            background: url(https://z3.ax1x.com/2021/07/21/WackfH.png) no-repeat 0 0;
            -webkit-transform: translateZ(50px);
        }

        .minbox li:nth-child(2) {
            background: url(https://z3.ax1x.com/2021/07/21/WacNn0.png) no-repeat 0 0;
            -webkit-transform: rotateX(180deg) translateZ(50px);
        }

        .minbox li:nth-child(3) {
            background: url(https://z3.ax1x.com/2021/07/21/WacwAU.png) no-repeat 0 0;
            -webkit-transform: rotateX(-90deg) translateZ(50px);
        }

        .minbox li:nth-child(4) {
            background: url(https://z3.ax1x.com/2021/07/21/Waca7T.png) no-repeat 0 0;
            -webkit-transform: rotateX(90deg) translateZ(50px);
        }

        .minbox li:nth-child(5) {
            background: url(https://z3.ax1x.com/2021/07/21/WacYXq.png) no-repeat 0 0;
            -webkit-transform: rotateY(-90deg) translateZ(50px);
        }

        .minbox li:nth-child(6) {
            background: url(https://z3.ax1x.com/2021/07/21/Wac1hQ.png) no-repeat 0 0;
            -webkit-transform: rotateY(90deg) translateZ(50px);
        }

        .maxbox li:nth-child(1) {
            background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0;
            -webkit-transform: translateZ(50px);
        }

        .maxbox li:nth-child(2) {
            background: url(https://z3.ax1x.com/2021/07/21/WagDVf.png) no-repeat 0 0;
            -webkit-transform: translateZ(50px);
        }

        .maxbox li:nth-child(3) {
            background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0;
            -webkit-transform: rotateX(-90deg) translateZ(50px);
        }

        .maxbox li:nth-child(4) {
            background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0;
            -webkit-transform: rotateX(90deg) translateZ(50px);
        }

        .maxbox li:nth-child(5) {
            background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0;
            -webkit-transform: rotateY(-90deg) translateZ(50px);
        }

        .maxbox li:nth-child(6) {
            background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0;
            -webkit-transform: rotateY(90deg) translateZ(50px);
        }