这是程序员表白系列中的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 class=" js-no-overflow-scrolling">
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>h5电子邀请函</title>
<link rel="stylesheet" type="text/css" href="page-animation.css">
<link rel="stylesheet" type="text/css" href="H5FullscreenPage.css">
</head>
<script>
alert("温馨提示:手机访问方可滚动查看下一页!")
</script>
<body class="H5FullscreenPage">
<div class="niben_banc">
<a href="#" onclick=" Tanchuc()">基本信息</a>
<a href="#">保存</a>
</div>
<!-- -->
<!--弹框 -->
<div class="tanchu_xx_web1 Tan_c">
<div class="tcc_beij_x_web" onclick=" off()"></div>
<div class="kuang_li">
<div class="off" onclick=" off()"></div>
<img class="img_bj" src="img/img_web3_03.png" alt="">
<div class="bt">
<h2>请输入您和您爱侣的名字</h2>
<p>还有你们喜结连理的时间哦</p>
</div>
<div class="bdkuan">
<input type="text" placeholder="新郎">
<input type="text" placeholder="新娘">
<input type="text" placeholder="新郎电话">
<input type="text" placeholder="新娘电话">
<input type="text" placeholder="结婚日期(如:2020年5月20日(星期六)12:00)">
<input type="text" placeholder="地址">
<button>确定</button>
</div>
</div>
<script>
function Tanchuc(){
$(".Tan_c").show();
}
function off(){
$(".Tan_c").hide();
}
</script>
</div>
<!-- -->
<div class="H5FullscreenPage-wrap">
<!-- -->
<div class="item item1">
<!-- 金色 -->
<div class="part rollInLeft shang_img">
<img src="img/2.png" alt="">
</div>
<div class="part rollInRight shang_img shang_img_b">
<img src="img/21.png" alt="">
</div>
<!-- 线条 -->
<div class="part top_Xial slideUp" data-delay="400"></div>
<div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div>
<!--hua 金花 -->
<div class="part fadeIn jinse_hua" data-delay="1000"> </div>
<div class="part fadeIn jinse_hua jinse_hua_x" data-delay="1000"></div>
<!-- 叶子 -->
<div class="part slideLeft yezi_zuo"></div>
<div class="part slideLeft yezi_zuo yezi_zuo_zq"></div>
<div class="part slideDown yezi_zuo_xx"></div>
<div class="part slideDown yezi_zuo_yrx"></div>
<div class="part zoomIn piao_gif" data-delay="1500">
<img src="img/jingy.gif" alt="">
</div>
<!-- 中间 -->
<div class="part fadeIn kuang_nieg" data-delay="800">
<img src="img/19.png" alt="">
</div>
<div class="part fadeIn kuang_nieg" data-delay="1000">
<img class="nie" src="img/19.png" alt="">
</div>
<!-- 中间叶子 -->
<div class="part fadeIn yezi_zhongk" data-delay="1300"></div>
<div class="part fadeIn yezi_zhongk_x" data-delay="1300"></div>
<!-- 字 -->
<div class="part zhongjiek_Ge" data-delay="1800">
<img src="img/9.png" alt="">
</div>
<div class="part zhongjiek_Ge" data-delay="1800">
<img class="nio" src="img/1.png" alt="">
</div>
<!-- 文字 -->
<div class="part xinniang_xinlang" data-delay="1800">
<p>Mr.志明<b>&</b>春娇.Miss</p>
<dd>2020/05/20</dd>
<span>You two are the prince and princess in a fairy tale and may you live happily everafter!</span>
</div>
<!-- 修改 -->
<!-- <div class="xiugai_nige"></div> -->
<!-- -->
<!-- <div class="part part1 fadeIn" data-delay="1000"> </div>
<div class="part part2 fadeIn"></div> -->
</div>
<!-- -->
<div class="item item2">
<!-- 金色 -->
<div class="part rollInLeft shang_img">
<img src="img/2.png" alt="">
</div>
<div class="part rollInRight shang_img shang_img_b">
<img src="img/21.png" alt="">
</div>
<!-- 线条 -->
<div class="part top_Xial slideUp" data-delay="400"></div>
<div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div>
<!--hua 金花 -->
<div class="part fadeIn jinse_hua" data-delay="1000"> </div>
<div class="part fadeIn jinse_hua jinse_hua_x" data-delay="1000"></div>
<!-- 叶子 -->
<div class="part slideLeft yezi_zuo"></div>
<div class="part slideLeft yezi_zuo yezi_zuo_zq"></div>
<div class="part slideDown yezi_zuo_xx"></div>
<div class="part slideDown yezi_zuo_yrx"></div>
<div class="part zoomIn piao_gif" data-delay="1500" style=" width: 100%;
height: 100%;
top: 0;">
<img src="img/jingy.gif" alt="">
</div>
<!-- 中间 -->
<div class="part fadeIn kuang_nieg" data-delay="800">
<img src="img/19.png" alt="">
</div>
<div class="part fadeIn kuang_nieg" data-delay="1000">
<img class="nie" src="img/19.png" alt="">
</div>
<!-- 中间叶子 -->
<div class="part fadeIn yezi_zhongk" data-delay="1300"></div>
<div class="part fadeIn yezi_zhongk_x" data-delay="1300"></div>
<!-- 字 -->
<div class="part zhongjiek_Ge rentx_kuang" data-delay="1800">
<div class="rentx">
<img src="img/xinlang1.jpg" alt="">
</div>
</div>
<!-- 文字 -->
<div class="part xinniang_xinlang" data-delay="1800" >
<p>新郎:志明</p>
<dd style=" line-height: .4rem; padding-top:.2rem;">要你拥有会长大的幸福<br>一天比一天像公主,梦都被满足</dd>
<!-- <span>You two are the prince and princess in a fairy tale and may you live happily everafter!</span> -->
</div>
<!-- -->
<!-- 修改 -->
<div class="xiugai_nige" style=" left: .3rem;top: 5.8rem;"></div>
<!-- -->
</div>
<!-- -->
<div class="item item3">
<!-- 金色 -->
<div class="part rollInLeft shang_img">
<img src="img/2.png" alt="">
</div>
<div class="part rollInRight shang_img shang_img_b">
<img src="img/21.png" alt="">
</div>
<!-- 线条 -->
<div class="part top_Xial slideUp" data-delay="400"></div>
<div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div>
<!--hua 金花 -->
<div class="part fadeIn jinse_hua" data-delay="1000"> </div>
<div class="part fadeIn jinse_hua jinse_hua_x" data-delay="1000"></div>
<!-- 叶子 -->
<div class="part slideLeft yezi_zuo"></div>
<div class="part slideLeft yezi_zuo yezi_zuo_zq"></div>
<div class="part slideDown yezi_zuo_xx"></div>
<div class="part slideDown yezi_zuo_yrx"></div>
<div class="part zoomIn piao_gif" data-delay="1500" style=" width: 100%;
height: 100%;
top: 0;">
<img src="img/jingy.gif" alt="">
</div>
<!-- 中间 -->
<div class="part fadeIn kuang_nieg" data-delay="800">
<img src="img/19.png" alt="">
</div>
<div class="part fadeIn kuang_nieg" data-delay="1000">
<img class="nie" src="img/19.png" alt="">
</div>
<!-- 中间叶子 -->
<div class="part fadeIn yezi_zhongk" data-delay="1300"></div>
<div class="part fadeIn yezi_zhongk_x" data-delay="1300"></div>
<!-- 字 -->
<div class="part zhongjiek_Ge rentx_kuang" data-delay="1800">
<div class="rentx">
<img src="img/ninnaing.jpg" alt="">
</div>
</div>
<!-- 文字 -->
<div class="part xinniang_xinlang" data-delay="1800" >
<p>新娘:春娇</p>
<dd style=" line-height: .4rem; padding-top:.2rem;">全世界都知道,我不在乎付出多少<br>我想这是幸福的写照</dd>
<!-- <span>You two are the prince and princess in a fairy tale and may you live happily everafter!</span> -->
</div>
<!-- -->
<!-- 修改 -->
<div class="xiugai_nige" style=" left: .3rem;top: 5.8rem;"></div>
<!-- -->
</div>
<!-- -->
<div class="item item4">
<div class="part rollInLeft shang_img">
<img src="img/2.png" alt="">
</div>
<div class="part rollInRight shang_img shang_img_b">
<img src="img/21.png" alt="">
</div>
<!-- 线条 -->
<div class="part top_Xial slideUp" data-delay="400"></div>
<div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div>
<!--hua 金花 -->
<div class="part fadeIn jinse_hua jinse_hua_no" data-delay="1000"> </div>
<div class="part fadeIn jinse_hua jinse_hua_x jinse_hua_no" data-delay="1000"></div>
<!-- 叶子 -->
<div class="part slideLeft yezi_zuo"></div>
<div class="part slideLeft yezi_zuo yezi_zuo_zq"></div>
<div class="part slideDown yezi_zuo_xx"></div>
<div class="part slideDown yezi_zuo_yrx"></div>
<!-- 中间叶子 -->
<div class="part fadeIn yezi_zhongk yezi_zhongk_dier" data-delay="1300"></div>
<!-- h婚纱照 -->
<div class="part nimen_img slideDown" data-delay="1800">
<img src="img/nin_gs.jpg" alt="">
</div>
<!-- 文字 -->
<div class="part xinniang_xinlang" data-delay="1800" >
<!-- <p>新娘:春娇</p> -->
<dd style="line-height: .4rem; padding-top:.2rem;">深爱之人藏心不挂嘴<br>久念之人在梦不在眼</dd>
<!-- <span>You two are the prince and princess in a fairy tale and may you live happily everafter!</span> -->
</div>
<!-- 修改 -->
<div class="xiugai_nige"></div>
<!-- -->
<!-- -->
</div>
<!-- -->
<div class="item item5">
<div class="part rollInLeft shang_img">
<img src="img/2.png" alt="">
</div>
<div class="part rollInRight shang_img shang_img_b">
<img src="img/21.png" alt="">
</div>
<!-- 线条 -->
<div class="part top_Xial slideUp" data-delay="400"></div>
<div class="part top_Xial top_Xial_b slideDown" data-delay="400"></div>
<!--hua 金花 -->
<div class="part fadeIn jinse_hua jinse_hua_no" data-delay="1000"> </div>
<div class="part fadeIn jinse_hua jinse_hua_x jinse_hua_no" data-delay="1000"></div>
<!-- 叶子 -->
<div class="part slideLeft yezi_zuo"></div>
<div class="part slideLeft yezi_zuo yezi_zuo_zq"></div>
<div class="part slideDown yezi_zuo_xx"></div>
<div class="part slideDown yezi_zuo_yrx"></div>
<!-- 中间叶子 -->
<div class="part fadeIn yezi_zhongk yezi_zhongk_dier" data-delay="1300"></div>
<!-- 字 -->
<div class="part zhongjiek_Ge zhongjiek_Ge_er" data-delay="1800">
<img src="img/9.png" alt="">
</div>
<div class="part zhongjiek_Ge zhongjiek_Ge_er" data-delay="1800">
<img class="nio" src="img/1.png" alt="">
</div>
<!-- h婚纱照 -->
<div class="part nimen_img nimen_img_text slideDown" data-delay="1800">
<div class="hou_tupian">
<p>在最好的年华</p>
<p>相见</p>
<p>在最美的时光里</p>
<p>相爱</p>
<p> 沉浸在幸福中的我们将于</p>
<p>2020年5月20日(星期六)12:00</p>
<p>举办婚礼</p>
<p>诚邀您和您的家人出席</p>
<p>新郎:志明 & 新娘:春娇</p>
<p>席设</p>
<p>贵州省贵阳市南明区国际大酒店</p>
<p>期待您的到来</p>
<p class="an">
<a href="tel:18275330710">联系新郎</a>
<a href="tel:18275330710">联系新娘</a>
</p>
</div>
</div>
<!-- 修改 -->
<!-- <div class="xiugai_nige"></div> -->
<!-- -->
</div>
<!-- -->
</div>
<script type="text/javascript" src="index_Zepto.js"></script>
<script type="text/javascript" src="H5FullscreenPage.js"></script>
<script type="text/javascript">
H5FullscreenPage.init({'type':2,'pageShow' : function(dom){
},'pageHide' : function(dom){
//console.log(dom);
}});
</script>
</body>
</html>
css代码
<style type="text/css">
html, body {
margin: 0;
width: 100%;
height: 100%;
font-family: arial;
text-align: center;
}
* {
margin:0;
padding: 0;
}
ul {
list-style: none;
}
body {
max-width: 640px;
margin: auto;
}
</style>
三、精彩专栏
看到这里了就 【点赞,关注,收藏】 三连 支持下吧,你的支持是我创作的动力。