❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
📂文章目录
二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码二、📚网站介绍
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现
三、🔗网站效果
▶️1.视频演示
94-(春娇-志明结婚邀请函(1)
🧩 2.图片演示
四、💒 网站代码
🧱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"><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></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="结婚日期（如：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>/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>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样式代码
.fadeIn {animation-name: fadeIn;-webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s;animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out;}@keyframes fadeIn {0% {transform: scale(0);opacity: 0.0; }60% {transform: scale(1.1); }80% {transform: scale(0.9);opacity: 1; } 100% {transform: scale(1);opacity: 1; } }@-webkit-keyframes fadeIn {0% {-webkit-transform: scale(0);opacity: 0.0; }60% {-webkit-transform: scale(1.1);}80% {-webkit-transform: scale(0.9);opacity: 1; } 100% {-webkit-transform: scale(1);opacity: 1; } }.slideLeft{animation-name: slideLeft;-webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s;animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out;}@keyframes slideLeft {0% {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}100% {opacity: 1;-webkit-transform: none;transform: none;}}@-webkit-keyframes slideLeft {0% {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}100% {opacity: 1;-webkit-transform: none;transform: none;}}.slideRight{animation-name: slideRight;-webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s;animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out;}@keyframes slideRight {0% {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}100% {opacity: 1;-webkit-transform: none;transform: none;}}@-webkit-keyframes slideRight {0% {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}100% {opacity: 1;-webkit-transform: none;transform: none;}}.slideUp {animation-name: slideUp;-webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s;animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out;}@keyframes slideUp {0% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}100% {opacity: 1;-webkit-transform: none;transform: none;}}@-webkit-keyframes slideUp {0% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}100% {opacity: 1;-webkit-transform: none;transform: none;}}.slideDown {animation-name: slideDown;-webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s;animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out;}@keyframes slideDown {0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}100% {opacity: 1;-webkit-transform: none;transform: none;}}@-webkit-keyframes slideDown {0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}100% {opacity: 1;-webkit-transform: none;transform: none;}}.rotateIn {animation-name: rotateIn;-webkit-animation-name: rotateIn; animation-duration: 1s; -webkit-animation-duration: 1s;animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out;}@keyframes rotateIn {0% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate3d(0, 0, 1, -200deg);transform: rotate3d(0, 0, 1, -200deg);opacity: 0;}100% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: none;transform: none;opacity: 1;}}@-webkit-keyframes rotateIn {0% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: rotate3d(0, 0, 1, -200deg);transform: rotate3d(0, 0, 1, -200deg);opacity: 0;}100% {-webkit-transform-origin: center;transform-origin: center;-webkit-transform: none;transform: none;opacity: 1;}}.zoomIn {animation-name: zoomIn;-webkit-animation-name: zoomIn; animation-duration: 1s; -webkit-animation-duration: 1s;animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out;}@-webkit-keyframes zoomIn {0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}50% {opacity: 1;}}@keyframes zoomIn {0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}50% {opacity: 1;}}.heartBeat{animation-name: heartBeat;-webkit-animation-name: heartBeat; animation-duration: 1.5s; -webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;}@keyframes heartBeat {0% {transform: scale(0.9);opacity: 0.7; }50% {transform: scale(1);opacity: 1; } 100% {transform: scale(0.9);opacity: 0.7; } }@-webkit-keyframes heartBeat {0% {-webkit-transform: scale(0.95);opacity: 0.7; }50% {-webkit-transform: scale(1);opacity: 1; } 100% {-webkit-transform: scale(0.95);opacity: 0.7; } }.rollInLeft {animation-name: rollInLeft;-webkit-animation-name: rollInLeft; animation-duration: 1s; -webkit-animation-duration: 1s;animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; }@-webkit-keyframes rollInLeft {0% {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);}100% {opacity: 1;-webkit-transform: none;transform: none;}}@keyframes rollInLeft {0% {opacity: 0;-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);}100% {opacity: 1;-webkit-transform: none;transform: none;}}.rollInRight {animation-name: rollInRight;-webkit-animation-name: rollInRight; animation-duration: 1s; -webkit-animation-duration: 1s;animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; }@-webkit-keyframes rollInRight {0% {opacity: 0;-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);}100% {opacity: 1;-webkit-transform: none;transform: none;}}@keyframes rollInRight {0% {opacity: 0;-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);}100% {opacity: 1;-webkit-transform: none;transform: none;}}
五、🎁更多源码
1.如果我的博客对你有帮助请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
