情人节程序员用HTML网页表白【七夕活动邀请函手机动态模板】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

于 2024-01-12 09:09:59 发布
阅读量415 收藏 8
点赞数 11
分类专栏： 网页设计 文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wx___BJ050106/article/details/126187946
版权

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

文章目录

一、网页介绍

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

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

一、网页效果

在这里插入图片描述

在这里插入图片描述

二、代码展示

1.HTML代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 强制让文档与设备的宽度保持1：1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            /*border: 1px solid red;*/
        }

        html,
        body {
            height: 100%;
        }

        .img8_10 {
            position: absolute;
            width: 220%;
            height: 25%;
            top: 25%;
            left: 10%;
            opacity: 0;
        }

        .img8_11 {
            background: url(images/daoxibeijing.jpg);
            position: absolute;
            width: 70%;
            height: 10%;
            top: 52%;
            left: 15%;
            opacity: 0;
        }

        .img8_11_1 {
            position: absolute;
            width: 100%;
            height: 90%;
            top: 0%;
            left: 0%;
            /*opacity: 0;*/
        }

        .img_hengxian1 {
            background: url(images/hengxian.png);
            background-size: 100% 100%;
            position: absolute;
            width: 70%;
            height: 5%;
            top: 47%;
            left: 15%;
            opacity: 0;
        }

        .img_hengxian2 {
            background: url(images/hengxian.png);
            background-size: 100% 100%;
            position: absolute;
            width: 70%;
            height: 5%;
            top: 62%;
            left: 15%;
            opacity: 0;
        }

        .wenzi3 {
            position: absolute;
            width: 100%;
            height: 10%;
            top: 72%;
            left: 0%;
            text-align: center;
            font-size: 16px;
            color: #fff;
            opacity: 0;
        }

        .btn {
            background: url(images/bgmBtn.svg);
            background-size: 100% 100%;
            position: absolute;
            width: 30px;
            height: 30px;
            top: 6%;
            right: 6%;
            z-index: 999;
        }

        .btnonclick {
            animation: circle 1s infinite linear;
        }
    </style>
</head>

<body>
    <div class="swiper-container">
        <div class="btn"></div>
        <audio id="video" autoplay src="http://res1.eqh5.com/o_1aj4i1djr340g3h1v2t1e6j1vga9.mp3"></audio>
        <div class="swiper-wrapper">
            <div class="swiper-slide section1">
                <img class="img1_1" src="images/1-2.png">
                <img class="img1_2" src="images/1_biankuang.png">
                <img class="img1_3" src="images/1-1.png">
                <img class="img1_4" src="images/shuye_1.png">
                <img class="img1_5" src="images/shuye_2.png">
                <img class="img1_6" src="images/shuye_4.png">
                <img class="img1_7" src="images/shuye_2.png">
                <img class="img1_8" src="images/shuye_3.png">
                <img class="img1_9" src="images/xiaozhenbao.png">
                <img class="img1_10" src="images/yaoqinghan.png">
                <img class="img1_11" src="images/yingwenzi.png">
            </div>
            <div class="swiper-slide section2">
                <img class="img2_1" src="images/ertubeijing.jpg" alt="">
                <div class="img2_2"></div>
                <div class="img2_3">
                    <span id="content1" style="white-space:pre">
            </div>
            <img class="img2_4" src="images/ertuhua.png" alt="">
        </div>
        <div class="swiper-slide section3">
            <img class="img3_1" src="images/santubeijing.png" alt="">
            <div class="img3_2">
                <ul style="height:100%;">
                    <li style="font-size: 64px;color: rgb(171, 124, 68);">丰盛/美好</li>
                    <li style="font-size: 20px;color:rgb(2, 21, 120);height:10%;">我们用<span style="font-weight: bold;">工匠</span>精神</li>
                    <li style="line-height: inherit; font-size: 12px; background-color: initial; color: rgb(207, 157, 83);"><span id="content2" style="white-space:pre"></span></li>
                    <li style="font-size: 20px;font-family: fangzheng_sht;;color:rgb(2, 21, 120);">是人生中最幸福的滋味</li>
                    <li><img style="width:70%" src="images/santuwenzia.png" alt=""></li>
                    <br>
                    <li style="font-size: 20px; font-family: fangzheng_fst;color:rgb(2, 21, 120);">烹调精致美食</li>
                    <li><img style="width:30%" src="images/santuwenzib.png" alt=""></li>
                    <li><img style="width:70%" src="images/santuwenzic.png" alt=""></li>
                    <li><img class="img3_3" src="images/santudi.png" alt=""></li>
                    </ul>
                </div>
            </div>
            <div class="swiper-slide section4">
                <img class="img4_1" src="images/santubeijing.png" alt="">
                <img class="img4_10" src="images/4-1.png" alt="">
   g">
                <img class="img8_7" src="images/shuye_2.png">
                <img class="img8_8" src="images/shuye_3.png">
                <div class="wenzi1">
                    <span class="wenzi8_1">珍<br>贵<br>的<br>你</span>
                </div>
                <div class="wenzi2">
                    <span class="wenzi8_2">久<br>等<br>了</span>
                </div>
                <img class="img8_9" src="images/xiaozhenbao3.png" alt="">
                <img class="img8_10" src="images/521.png" alt="">
                <div class="img8_11">
                    <img class="img8_11_1" src="images/daoxi.png" alt="">
                </div>
                <div class="img_hengxian1"></div>
                <div class="img_hengxian2"></div>
                <div class="wenzi3"><span>邀请你与我共享美食（只限观看的你</span></div>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <!-- <div class="swiper-button-prev"></div> -->
        <!-- <div class="swiper-button-next"></div> -->

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>
    <script src="js/swiper-3.4.2.min.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/typed.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            // loop: true,

            // 如果需要分页器
            pagination: '.swiper-pagination',
            onInit: function(swiper) {
                //Swiper初始化了
                //alert(swiper.activeIndex);提示Swiper的当前索引
                console.log("onInit" + swiper.activeIndex);
                $(".img1_2").addClass("biankuang").css("opacity", 0.5);
                $(".img1_3").addClass("tu1").css("opacity", 1);
                $(".img1_4").addClass("yezia").css("opacity", 1);
                $(".img1_5").addClass("yezib").css("opacity", 1);
                $(".img1_6").addClass("yezic").css("opacity", 1);
                $(".img1_7").addClass("yezid").css("opacity", 1);
                $(".img1_8").addClass("yezie").css("opacity", 1);
                $(".img1_9").delay(3000).fadeIn();
                $(".img1_10").delay(4000).fadeIn();
                $(".img1_11").delay(3500).fadeIn();
      
                        }, 0, function() {
                            $(this).addClass("leftin2");
                        });
                        $(".img4_6").delay(1500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("leftin3");
                        });
                        $(".img4_8").delay(2000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("leftin3");
                        });
                        $(".img4_9").delay(2500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("leftin3");
                        });
                        break;
                    case 4:
                        $(".img5_8").addClass("fadeInDown animated");
                        $(".img5_2").delay(1000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInUp animated");
                        });
                        $(".img5_3").delay(1000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInUp animated");
                        });
                        $(".img5_5").delay(1500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInUp animated");
                        });
                        $(".img5_7").delay(2000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInUp animated");
                        });
                        break;
                    case 5:
                        $(".img6_2").addClass("fadeInLeft animated");
                        $(".img6_3").delay(1000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        $(".img6_4").delay(1000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        $(".img6_6").delay(1500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        $(".img6_8").delay(2000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        $(".img6_9").delay(2000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        $(".img6_10").delay(2500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        $(".img6_11").delay(2500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        break;
                    case 6:
                        $(".img7_1").addClass("fadeInUp animated");
                        $(".img7_2").delay(1000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInDown animated");
                        });
                        $(".img7_3").delay(1000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInDown animated");
                        });
                        $(".img7_5").delay(1500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInDown animated");
                        });
                        $(".img7_7").delay(2000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInDown animated");
                        });
                        break;
                    case 7:
                        $(".img8_2").stop(true, true).addClass("biankuang").css("opacity", 0.5);
                        $(".img8_3").stop(true, true).addClass("tu1").css("opacity", 1);
                        $(".img8_4").stop(true, true).addClass("yezia").css("opacity", 1);
                        $(".img8_5").stop(true, true).addClass("yezib").css("opacity", 1);
                        $(".img8_6").stop(true, true).addClass("yezic").css("opacity", 1);
                        $(".img8_7").stop(true, true).addClass("yezid").css("opacity", 1);
                        $(".img8_8").stop(true, true).addClass("yezie").css("opacity", 1);
                        $(".wenzi1").stop(true, true).delay(3000).animate({
                            opacity: 1
                        }, 0, function() {
                            $(this).addClass("fadeIn animated");
                        }).delay(1000).animate({
                            opacity: 0
                        }, 1000, function() {
                            $(this).removeClass("fadeIn animated");
                        });
                        $(".wenzi2").stop(true, true).delay(5500).animate({
                            opacity: 1
                        }, 0, function() {
                            $(this).addClass("fadeIn animated");
                        }).delay(1000).animate({
                            opacity: 0
                        }, 1000, function() {
                            $(this).removeClass("fadeIn animated");
                            $(".img8_9").stop(true, true).delay(1000).animate({
                                opacity: 1
                            }, 0, function() {
                                $(this).fadeIn();
                            });
                            $(".img8_10").stop(true, true).delay(1500).animate({
                                opacity: 1
                            }, 0, function() {
                                $(this).fadeIn();
                            });
                            $(".img8_11").stop(true, true).delay(2500).animate({
                                opacity: 1
                            }, 0, function() {
                                $(this).fadeIn();
                            });
                            $(".img_hengxian1").stop(true, true).delay(2000).animate({
                                opacity: 1
                            }, 0, function() {
                                $(this).fadeIn();
                            });
                            $(".img_hengxian2").stop(true, true).delay(3000).animate({
                                opacity: 1
                            }, 0, function() {
                                $(this).fadeIn();
                            });
                            $(".wenzi3").stop(true, true).delay(3500).animate({
                                opacity: 1
                            }, 0, function() {
                                $(this).fadeIn();
                            });
                        });
                        break;
                }
            },
            onSlideChangeStart: function(swiper) {
                if (swiper.activeIndex != 0) {
                    $(".img1_2").stop(true, true).removeClass("biankuang").css("opacity", 0);
                    $(".img1_3").stop(true, true).removeClass("tu1").css("opacity", 0);
                    $(".img1_4").stop(true, true).removeClass("yezia").css("opacity", 0);
                    $(".img1_5").stop(true, true).removeClass("yezib").css("opacity", 0);
                    $(".img1_6").stop(true, true).removeClass("yezic").css("opacity", 0);
                    $(".img1_7").stop(true, true).removeClass("yezid").css("opacity", 0);
                    $(".img1_8").stop(true, true).removeClass("yezie").css("opacity", 0);
                    $(".img1_9").stop(true, true).fadeOut();
                    $(".img1_10").stop(true, true).fadeOut();
                    $(".img1_11").stop(true, true).fadeOut();
                }
                if (swiper.activeIndex != 1) {
                    $(".img2_1").stop(true, true).css("left", "0%");
                    $(".img2_2").stop(true, true).css("display", "none").css("left", "75%");
                    $("#content1").fadeOut();
                    $(".img2_4").stop(true, true).animate({
                        left: "100%"
                    });
                }
                if (swiper.activeIndex != 2) {
                    $(".img3_2").children().children().eq(0).stop(true, true).css("opacity", 0);
                    $(".img3_2").children().children().eq(3).stop(true, true).css("opacity", 0);
                    $(".img3_2").children().children().eq(1).stop(true, true).css("opacity", 0);
                    $(".img3_2").children().children().eq(5).stop(true, true).css("opacity", 0);
                    $(".img3_2").children().children().eq(4).stop(true, true).css("opacity", 0);
                    $(".img3_2").children().children().eq(6).stop(true, true).css("opacity", 0);
                    $(".img3_2").children().children().eq(7).stop(true, true).css("opacity", 0).removeClass("bounceInDown animated");
                    $(".img3_2").children().children().eq(8).stop(true, true).css("opacity", 0).removeClass("shake animated");
                    $(".img3_2").children().children().eq(2).css("opacity", "0");
                    $("#content2").fadeOut();
                }
                if (swiper.activeIndex != 3) {
                    $(".img4_10").stop(true, true).removeClass("rightin1").css("opacity", 0);
                    $(".img4_11").stop(true, true).removeClass("rightin2").css("opacity", 0);
                    $(".img4_2").stop(true, true).removeClass("leftin1").css("opacity", 0);
                    $(".img4_3").stop(true, true).removeClass("leftin1").css("opacity", 0);
                    $(".img4_5").stop(true, true).removeClass("leftin2").css("opacity", 0);
                    $(".img4_6").stop(true, true).removeClass("leftin3").css("opacity", 0);
                    $(".img4_8").stop(true, true).removeClass("leftin3").css("opacity", 0);
                    $(".img4_9").stop(true, true).removeClass("leftin3").css("opacity", 0);
                }
                if (swiper.activeIndex != 4) {
                    $(".img5_8").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
                    $(".img5_2").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
                    $(".img5_3").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
                    $(".img5_5").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
                    $(".img5_7").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
                }
                if (swiper.activeIndex != 5) {
                    $(".img6_2").stop(true, true).removeClass("fadeInLeft animated").css("opacity", 0);
                    $(".img6_3").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                    $(".img6_4").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                    $(".img6_6").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                    $(".img6_8").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                    $(".img6_9").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                    $(".img6_10").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                    $(".img6_11").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                }
                if (swiper.activeIndex != 6) {
                    $(".img7_1").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
                    $(".img7_2").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
                    $(".img7_3").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
                    $(".img7_5").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
                    $(".img7_7").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
                };
                if (swiper.activeIndex != 7) {
                    $(".img8_2").stop(true, true).removeClass("biankuang").css("opacity", 0);
                    $(".img8_3").stop(true, true).removeClass("tu1").css("opacity", 0);
                    $(".img8_4").stop(true, true).removeClass("yezia").css("opacity", 0);
                    $(".img8_5").stop(true, true).removeClass("yezib").css("opacity", 0);
                    $(".img8_6").stop(true, true).removeClass("yezic").css("opacity", 0);
                    $(".img8_7").stop(true, true).removeClass("yezid").css("opacity", 0);
                    $(".img8_8").stop(true, true).removeClass("yezie").css("opacity", 0);
                    $(".wenzi1").stop(true, true).css("opacity", 0).removeClass("fadeIn animated");
                    $(".wenzi2").stop(true, true).css("opacity", 0).removeClass("fadeIn animated");
                    $(".img8_9").stop(true, true).css("opacity", 0).fadeOut();
                    $(".img8_10").stop(true, true).css("opacity", 0).fadeOut();
                    $(".img8_11").stop(true, true).css("opacity", 0).fadeOut();
                    $(".img_hengxian1").stop(true, true).css("opacity", 0).fadeOut();
                    $(".img_hengxian2").stop(true, true).css("opacity", 0).fadeOut();
                    $(".wenzi3").stop(true, true).css("opacity", 0).fadeOut();
                }
            }
            // 如果需要前进后退按钮
            // nextButton: '.swiper-button-next',
            // prevButton: '.swiper-button-prev',

            // 如果需要滚动条
            // scrollbar: '.swiper-scrollbar',
            // onSlideChangeEnd: function(Swiper) {
            //     // console.log(swiper.activeIndex);
            //     switch (swiper.activeIndex) {
            //         case 0:
            //         // $(".img1_4").addClass("yezi");
            //         console.log(111);
            //         // alert(111);
            //         break;
            //     }
            // },
        })

        $(function() {
            var video = document.getElementById("video");
            $(".btn").addClass("btnonclick");
            $(".btn").click(function() {
                if (video.paused) {
                    video.play();
                    $(".btn").addClass("btnonclick");
                } else {
                    video.pause();
                    $(".btn").removeClass("btnonclick");
                }
            })
        })
    </script>

</body>

</html>

2.CSS代码


    <style>
        @media screen and (max-width:540px) {
            .swiper-container {
                width: 100%;
                height: 100%;
            }
        }
    </style>
html网页制作
关注
  • 11
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值