15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 情人节程序员用HTML网页表白【制作浪漫气球520告白相册】 HTML5七夕情人节表白

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

时间:2023-07-26 14:54:01 | 来源:网站运营

时间:2023-07-26 14:54:01 来源:网站运营

情人节程序员用HTML网页表白【制作浪漫气球520告白相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript:
这是程序员表白系列中的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; }}

三、精彩专栏

看到这里了就 【点赞,关注,收藏】 三连 支持下吧,你的支持是我创作的动力。 【主页—— 获取更多优质源码】

关键词:表白,告白,七夕,相册,浪漫,程序,气球

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭