菜单 搜索
首页 前端知识 情人节程序员用HTML网页表白【冬季雪花生日礼物制作一个超浪漫的告白3D相册】 HTML5七夕情人节表白网页源码 HTML CSS JavaScript

情人节程序员用HTML网页表白【冬季雪花生日礼物制作一个超浪漫的告白3D相册】 HTML5七夕情人节表白网页源码 HTML CSS JavaScript

2024-06-20 00:06:46 前端知识 前端哥 578 842 我要收藏

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用网页告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录

  • 一、网页介绍
  • 一、网页效果
  • 二、代码展示
    • 1.HTML代码
  • 三、精彩专栏

一、网页介绍

1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

 
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <base href="http://web.tanganbin.cn/biaobai_shengdan/" />
 
    <title>七夕雪花</title>
    <!-- <link rel="stylesheet" href="css/buttons.css"> -->
 
    <style type="text/css">
        body {
            background-color: #000044;
            height: 100%;
            /* background: url(images/bj.jpg) repeat-x; */
            background: url(images/bj.jpg) repeat;
            margin: 0px;
            overflow: hidden;
        }
 
        a {
            color: #0078ff;
        }
 
        .cs {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            position: absolute;
            text-align: center;
            font-family: 微软雅黑;
            color: rgba(255, 16, 34, 0.48);
        }
 
        img#logo {
            width: 128px;
            background-size: cover;
            border-radius: 200px;
            box-shadow: 0px 0px 40px rgba(63, 81, 181, 0.72);
            border: 3px solid #00a0ff;
            opacity: 1;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 20px;
            transition: all 1.0s;
        }
 
        #logo:hover {
            box-shadow: 0 0 10px #fff;
            -webkit-box-shadow: 0 0 19px #fff;
            transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            /* IE 9 */
            -moz-transform: rotate(360deg);
            /* Firefox */
            -webkit-transform: rotate(360deg);
            /* Safari 和 Chrome */
            -o-transform: rotate(360deg);
            /* Opera */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }
 
        body {
            cursor: url(./images/Link.cur), default;
        }
 
        a:hover,
        li:hover,
        img:hover {
            cursor: url(./images/Regular.cur), pointer;
        }
 
        * {
            margin: 0;
            padding: 0;
        }
 
        body {
            max-width: 100%;
            min-width: 100%;
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 100% 100%;
            position: absolute;
            margin-left: auto;
            margin-right: auto;
        }
 
        li {
            list-style: none;
        }
 
        .box {
            z-index: 999999 !important;
            width: 200px;
            height: 200px;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 100% 100%;
            position: fixed !important;
            top: 42%;
            left: 40%;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: rotateX(13deg);
            -webkit-animation: move 5s linear infinite;
        }
 
        .minbox {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50px;
            top: 30px;
            -webkit-transform-style: preserve-3d;
        }
 
        .minbox li {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
        }
 
        .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);
        }
 
        .maxbox {
            width: 800px;
            height: 400px;
            position: absolute;
            left: 0;
            top: -20px;
            -webkit-transform-style: preserve-3d;
        }
 
        .maxbox li {
            width: 200px;
            height: 200px;
            background: #fff;
            border: 1px solid #ccc;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.2;
            -webkit-transition: all 1s ease;
        }
 
        .maxbox li:nth-child(1) {
            -webkit-transform: translateZ(100px);
        }
 
        .maxbox li:nth-child(2) {
            -webkit-transform: rotateX(180deg) translateZ(100px);
        }
 
        .maxbox li:nth-child(3) {
            -webkit-transform: rotateX(-90deg) translateZ(100px);
        }
 
        .maxbox li:nth-child(4) {
            -webkit-transform: rotateX(90deg) translateZ(100px);
        }
 
        .maxbox li:nth-child(5) {
            -webkit-transform: rotateY(-90deg) translateZ(100px);
        }
 
        .maxbox li:nth-child(6) {
            -webkit-transform: rotateY(90deg) translateZ(100px);
        }
 
        .box:hover ol li:nth-child(1) {
            -webkit-transform: translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
 
        .box:hover ol li:nth-child(2) {
            -webkit-transform: rotateX(180deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
 
        .box:hover ol li:nth-child(3) {
            -webkit-transform: rotateX(-90deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
 
        .box:hover ol li:nth-child(4) {
            -webkit-transform: rotateX(90deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
 
        .box:hover ol li:nth-child(5) {
            -webkit-transform: rotateY(-90deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
 
        .box:hover ol li:nth-child(6) {
            -webkit-transform: rotateY(90deg) translateZ(300px);
            width: 400px;
            height: 400px;
            opacity: 0.8;
            left: -100px;
            top: -100px;
        }
 
        @keyframes move {
            0% {
                -webkit-transform: rotateX(13deg) rotateY(0deg);
            }
 
            100% {
                -webkit-transform: rotateX(13deg) rotateY(360deg);
            }
        }
    </style>
 
 
</head>
 
<body onLoad="init()">
 
    <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>
    <script type="text/javascript" src="js/threecanvas.js"></script>
    <script type="text/javascript" src="js/snow.js"></script>
    <script type="text/javascript">
        var SCREEN_WIDTH = window.innerWidth;
        var SCREEN_HEIGHT = window.innerHeight;
 
        var container;
 
        var particle;
 
        var camera;
        var scene;
        var renderer;
 
        var mouseX = 0;
        var mouseY = 0;
 
        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 onDocumentMouseMove(event) {
 
            mouseX = event.clientX - windowHalfX;
            mouseY = event.clientY - windowHalfY;
        }
 
        function onDocumentTouchStart(event) {
 
            if (event.touches.length == 1) {
 
                event.preventDefault();
 
                mouseX = event.touches[0].pageX - windowHalfX;
                mouseY = event.touches[0].pageY - windowHalfY;
            }
        }
 
        function onDocumentTouchMove(event) {
 
            if (event.touches.length == 1) {
 
                event.preventDefault();
 
                mouseX = event.touches[0].pageX - windowHalfX;
                mouseY = event.touches[0].pageY - windowHalfY;
            }
        }
 
        //
 
        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;
                }
            }
 
            camera.position.x += (mouseX - camera.position.x) * 0.05;
            camera.position.y += (-mouseY - camera.position.y) * 0.05;
            camera.lookAt(scene.position);
 
            renderer.render(scene, camera);
 
 
        }
    </script>
    <!---播放器--->
    <audio autoplay="autoplay" loop="loop">
        <source src="music/yinyue.mp3" type="audio/mpeg">
    </audio>
 
</body>
 
</html>
 
复制

三、精彩专栏

看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

转载请注明出处或者链接地址：https://www.qianduange.cn//article/12928.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！