情人节程序员用HTML网页表白【制作浪漫气球520告白相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

原创

IT司马青衫

发布于 2022-08-21 09:45:53

5720

发布于 2022-08-21 09:45:53

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

@TOC

一、网页介绍

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

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

一、网页效果

二、代码展示

1.HTML代码

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

<!--
 * @Author: your name
 * @Date: 2021-07-07 09:34:19
 * @LastEditTime: 2021-07-21 16:13:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \css3气球动画制作空中飘浮气球动画特效\index.html
-->
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <link href="css/index.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <div class="qiqiu1 qiqiu">
        <img src="images/201101asdsaf22135412367.png" />
        <div class="text">love</div>
    </div>
    <div class="qiqiu2 qiqiu">
        <img src="images/201101ddd22135412367.png" />
        <div class="text">love</div>
    </div>
    <div class="qiqiu3 qiqiu">
        <img src="images/20110122135aaaaa412367.png" />
        <div class="text">love</div>
    </div>
    <div class="qiqiu4 qiqiu">
        <img src="images/20110122135s412367.png" />
        <div class="text">love</div>
    </div>
    <div class="qiqiu5 qiqiu">
        <img src="images/20110122135412367.png" />
        <div class="text">love</div>
    </div>
    <div class="qiqiu1 qiqiu">
        <img src="images/201101asdsaf22135412367.png" />
        <div class="text">love</div>
    </div>
    <div class="qiqiu2 qiqiu">
        <img src="images/201101ddd22135412367.png" />
        <div class="text">love</div>
    </div>
    <div class="qiqiu3 qiqiu">
        <img src="images/20110122135aaaaa412367.png" />
        <div class="text">love</div>
    </div>
    <div class="qiqiu4 qiqiu">
        <img src="images/20110122135s412367.png" />
        <div class="text">love</div>
    </div>
    <div class="qiqiu5 qiqiu">
        <img src="images/20110122135412367.png" />
        <div class="text">love</div>
    </div>

    <div class="yun1 yun"> </div>
    <div class="yun2 yun"> </div>
    <div class="yun3 yun"> </div>
    <div class="yun4 yun"> </div>

</body>

</html>

2.CSS代码

@charset "utf-8";
/* CSS Document */

html {
    height: 100%
}

body {
    background: url(../images/bg.jpg) no-repeat center top;
    background-size: 100% 100%
}

.qiqiu {
    position: fixed;
    width: 100px;
    height: 200px;
}

.qiqiu div {
    /* width: 70px; */
    /* height: 65px; */
    /* background: url(../images/730e0cf3d7ca7bcbbc1b79c0bf096b63f724a8f9.png) no-repeat center center; */
    background: url(../images/09.png) no-repeat center center;
    /* padding: 15px 5px 0; */
        width: 160px;
    height: 160px;
    text-align: center;
    margin: 0 -27px;
    background-size: 100% auto;
}

.qiqiu img {
    width: 100%;
    height: auto;
    display: block;
}

.qiqiu1 {
    bottom: -200px;
    left: 400px;
    animation: myfirst 20s linear infinite;
    z-index: 2222;
    animation-delay: 0s;
    -webkit-animation: myfirst 20s linear infinite;
    z-index: 2222;
    -webkit-animation-delay: 0s;
}

.qiqiu2 {
    bottom: -200px;
    left: 650px;
    animation: myfirst2 22s 1s linear infinite;
    animation-delay: 2s;
    width: 70px;
    -webkit-animation: myfirst2 22s 1s linear infinite;
    -webkit-animation-delay: 2s;
}

.qiqiu3 {
    bottom: -200px;
    left: 900px;
    animation: myfirst3 22.2s linear infinite;
    z-index: 2222;
    animation-delay: 3s;
    -webkit-animation: myfirst3 22.2s linear infinite;
    -webkit-animation-delay: 3s;
}

.qiqiu4 {
    bottom: -200px;
    left: 1050px;
    animation: myfirst4 21s 0.2s linear infinite;
    z-index: 2222;
    animation-delay: 5s;
    -webkit-animation: myfirst4 21s 0.2s linear infinite;
    -webkit-animation-delay: 5s;
}

.qiqiu5 div {
    width: 100px;
    height: 100px;
    padding: 5px 5px 0;
    margin: 0 auto
}

.qiqiu2 div {
    width: 80px;
    height: 80px;
    padding: 5px 5px 0;
    margin: 0 auto
}

.qiqiu5 {
    bottom: -200px;
    left: 1250px;
    animation: myfirst5 19.5s 1.2s linear infinite;
    animation-delay: 4s;
    width: 60px;
}

.yun {
    position: fixed;
}

.yun1 {
    width: 567px;
    height: 185px;
    background: url(../images/yun1.png) no-repeat center center;
    left: 1060px;
    top: 318px;
    animation: myfirst6 50s linear infinite;
    -webkit-animation: myfirst6 50s linear infinite;
}

.yun2 {
    width: 605px;
    height: 253px;
    background: url(../images/yun2.png) no-repeat center center;
    left: 180px;
    top: 249px;
    animation: myfirst7 50s linear infinite;
    -webkit-animation: myfirst7 50s linear infinite;
}

.yun3 {
    width: 348px;
    height: 226px;
    background: url(../images/yun3.png) no-repeat center center;
    left: 50px;
    top: 500px;
    animation: myfirst8 50s linear infinite;
    -webkit-animation: myfirst8 50s linear infinite;
}

.yun4 {
    width: 786px;
    height: 362px;
    background: url(../images/yun4.png) no-repeat center center;
    left: 762px;
    top: 433px;
    animation: myfirst9 50s linear infinite;
    -webkit-animation: myfirst9 50s linear infinite;
}

@keyframes myfirst {
    from {
        bottom: -200px;
    }
    to {
        bottom: 800px;
    }
}

@keyframes myfirst2 {
    from {
        bottom: -200px;
    }
    to {
        bottom: 850px;
    }
}

@keyframes myfirst3 {
    from {
        bottom: -200px;
    }
    to {
        bottom: 820px;
    }
}

@keyframes myfirst4 {
    from {
        bottom: -200px;
    }
    to {
        bottom: 780px;
    }
}

@keyframes myfirst5 {
    from {
        bottom: -200px;
    }
    to {
        bottom: 830px;
    }
}

@keyframes myfirst6 {
    from {
        left: 1060px;
    }
    to {
        left: 1250px;
    }
}

@keyframes myfirst7 {
    from {
        left: 180px;
    }
    to {
        left: 400px;
    }
}

@keyframes myfirst8 {
    from {
        left: 50px;
    }
    to {
        left: 350px;
    }
}

@keyframes myfirst9 {
    from {
        left: 762px;
    }
    to {
        left: 1000px;
    }
}

@-webkit-keyframes myfirst {
    from {
        bottom: -200px;
    }
    to {
        bottom: 800px;
    }
}

@-webkit-keyframes myfirst2 {
    from {
        bottom: -200px;
    }
    to {
        bottom: 850px;
    }
}

@-webkit-keyframes myfirst3 {
    from {
        bottom: -200px;
    }
    to {
        bottom: 820px;
    }
}

@-webkit-keyframes myfirst4 {
    from {
        bottom: -200px;
    }
    to {
        bottom: 780px;
    }
}

@-webkit-keyframes myfirst5 {
    from {
        bottom: -200px;
    }
    to {
        bottom: 830px;
    }
}

@-webkit-keyframes myfirst6 {
    from {
        left: 1060px;
    }
    to {
        left: 1250px;
    }
}

@-webkit-keyframes myfirst7 {
    from {
        left: 180px;
    }
    to {
        left: 400px;
    }
}

@-webkit-keyframes myfirst8 {
    from {
        left: 50px;
    }
    to {
        left: 350px;
    }
}

@-webkit-keyframes myfirst9 {
    from {
        left: 762px;
    }
    to {
        left: 1000px;
    }
}