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

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

2024-06-20 00:06:46 前端知识 前端哥 563 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基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

HTML5生日蛋糕网页设计与制作 生日祝福制作代码 生日快乐网页模板【生日蛋糕树】HTML CSS JavaScript html七夕情人节网页制作

2024-06-30 22:06:34

HTML5五十六个民族网站模板源码

2024-06-30 22:06:14

Markdown基础与进阶语法

2024-06-30 22:06:12

零基础 HTML 入门（详细）

2024-06-30 22:06:09

Qt中使用QWebEngineView控件加载HTML及常见问题解答

2024-06-30 22:06:08

HTML、JavaScript连接MySQL数据库以及对数据库的表进行修改

2024-06-30 22:06:08

html将复选框变为圆形样例

2024-06-30 22:06:57

HTML CSS仿淘宝商城商品栏模块

2024-06-30 22:06:55

两种风格的纯CSS3加载动画

2024-06-30 22:06:53

CSS3基本语法

2024-06-30 22:06:51

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

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

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

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

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

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