首页 > 分享 > HTML5七夕情人节表白代码

HTML5七夕情人节表白代码

花匠小妙招
2024-12-01 07:42

❤ 精彩专栏推荐
作者主页: 【进入主页—获取更多源码】
web前端期末大作业：【HTML5网页期末作业 (1000套) 】
程序员有趣的告白方式：【HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

文章目录二、网站介绍三、网站效果▶️1.视频演示 2.图片演示四、网站代码HTML结构代码

二、网站介绍

网站文件方面：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.视频演示

2.图片演示

在这里插入图片描述

四、网站代码

HTML结构代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>forever love</title> </head> <script src="js/lib/jquery.min.js" type="text/javascript"></script> <script src="js/lib/jquery.fireworks.js" type="text/javascript"></script> <style type="text/css"> *{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-sizing: border-box; box-sizing: border-box; } html{ width: 100%; height: 100%; } body{ max-width: 600px; margin: 0 auto; background: #0b3443; color: #f0f0f0;} .share_img{ width: 0; height: 0; overflow: hidden; opacity: 0; } .content{ padding: 80px 20px;} .text_wrapper{ display: -webkit-box; display: flex; } .text_wrapper .text{ padding-top: 20px; padding-left: 20px; } .hide{ display: none !important; } p{ margin: 0; } .btn-groups{ padding-right: 20px; text-align: center; } .heart-btn{ display: inline-block; animation: breath 0.8s linear 0s infinite both; -webkit-animation: breath 0.8s linear 0s infinite both; } .btn{ position: relative; display: inline-block; width: 60px; height: 60px; margin: 0 30px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .btn span{ display: block; width: 100%; height: 100%; line-height: 60px; margin-top: -10px; margin-left: -10px; text-align: center; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .btn-a{ background: #d26ae5; } .btn-b{ background: #c9c9c9; } .btn-a:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #d26ae5; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; } .btn-a:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #d26ae5; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;} .btn-b:before{ content: ''; position: absolute; display: block; width: 30px; height: 60px; background: #c9c9c9; left: -29px; top: 0; border-top-left-radius: 60px; border-bottom-left-radius: 60px; } .btn-b:after{ content: ''; position: absolute; display: block; width: 60px; height: 30px; background: #c9c9c9; left: 0; top: -29px; border-top-left-radius: 60px; border-top-right-radius: 60px;} .container{ } .container .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); } .container .modal{ width: 80%; height: 160px; position: absolute; top: 50%; left: 50%; padding: 20px 15px; border-radius: 5px; transform: translate(-50%, -70%); -webkit-transform: translate(-50%，-70%); background: #f3f3f3;} .container .modal p{ margin-top: 20px; margin-bottom: 20px; font-size: 16px; color: #353535; text-align: center;} .confirm{ display: block; width: 120px; height: 40px; margin: 0 auto; border: none; font-size: 16px; border-radius: 5px; color: #ffffff; background: #f45cae; } .type_words{ padding: 12px 20px; } @keyframes breath {0% {transform: scale3d(1,1,1);-webkit-transform: scale3d(1,1,1);transform-origin: 50% 50%;}50%{transform: scale3d(1.02,1.02,1.02);-webkit-transform: scale3d(1.02,1.02,1.02);transform-origin: 50% 50%;}100%{transform: scale3d(1,1,1);-webkit-transform: scale3d(1,1,1);transform-origin: 50% 50%;} } </style> <script type="text/javascript"> $(function() {$('#yes').click(function(event) {modal('我就知道小姐姐您一定会愿意的。(^_^)', function() {$('.page_one').addClass('hide');$('.page_two').removeClass('hide');// typeWrite();fireworks();});});$('#no').click(function(event) {modal('明人不说暗话！', A);}); }); function A() {modal('我喜欢你！', B); } function B() {modal('我知道你在等我这一句话', C); } function C() {modal('请您不要拒绝我', D); } function D() {modal('拒绝我，不存在的', E); } function E() {modal('这辈子都不可能让你离开我', F); } function F() {modal('跟我走吧', G); } function G() {modal('房产证上写你名', H); } function H() {modal('我会做饭', I); } function I() {modal('爱你。么么哒！', J) } function J() {modal('行，我们去民政局登记吧', function() {fireworks();}); } function fireworks() {$('.page_one').addClass('hide');$('.page_two').removeClass('hide');$('.page_two').fireworks({ sound: false, opacity: 0.9, width: '100%', height: '100%'}); } function modal(content, callback) {var tpl = '<div class="container">'+'<div class="mask"></div>'+'<div class="modal">'+'<p>'+ content +'</p>'+'<button type="button" id="confirm" class="confirm">确定</button>'+'</div>'+'</div>';$('body').append(tpl);$(document).on('click', '.confirm', function() {$('.container').remove();callback();}); } var myWords = '有人说，人的一生会遇到2920万人，而两个人相爱的概率只有0.000049。在这茫茫人海中，两个人能相遇就值得感激，能相爱更是一种难得。所以，我很庆幸上天让我遇见了你。我希望有个如你一般的人，能看完我写过的所有状态，读完我所有的日志，看完我从小到大的照片，试着听我喜欢的歌。如果可以，甚至陪我去我喜欢的地方，只想弥补错过你的青春。'; var x = 0; var speed = 150; var current = 0; function typeWrite(){$('.type_words').html(myWords.substring(0, x++)+'_');var timer = setTimeout("typeWrite()", speed);if (x == myWords.length) {x = myWords.length;clearTimeout(timer)} } </script> <body> <div class="share_img"><img src="images/a8b.png" alt=""></div> <div class="page_one"><div class="content"><div class="text_wrapper"><img src="images/a8.png" alt=""><div class="text">小姐姐，我好喜欢你，你愿意做我女朋友吗？</div></div></div><div class="btn-groups"><div class="heart-btn"><div id="yes" class="btn btn-a"><span>愿意</span></div></div><div id="no" class="btn btn-b"><span>不愿意</span></div></div> </div> <div class="page_two hide"><div class="type_words"></div> </div> </body> </html> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184

<hr> # 五、更多源码 1.如果我的博客对你有帮助 `请 “点赞” “✍️评论” “收藏” `一键三连哦！ 2.`【关注我| 获取更多源码】 `带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等! 以上内容技术相关问题欢迎一起交流学习 1234567891011121314