admin管理员组文章数量:1794759
HTML实现表白biu爱心特效 (程序员专属情人节表白网站)
❤ 精彩专栏推荐👇🏻👇🏻👇🏻 💂 作者主页: 【进入主页—🚀获取更多源码】 🎓 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.视频演示
98-情人节爱你的代码
🧩 2.图片演示四、💒 网站代码 🧱HTML结构代码 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>I Love You Forever</title> <meta name="author" content="Mike"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <!--导库--> <script type="text/javascript" src="js/jquery.js"></script> <!-- 图片幻灯片效果--> <script type="text/javascript" src="js/roundabout.js"></script> <script type="text/javascript" src="js/roundabout_shapes.js"></script> <script type="text/javascript" src="js/gallery_init.js"></script> <!-- 下雪--> <script type="text/javascript" src="js/snowstorm.js"></script> <!-- 打字机效果--> <script type="text/javascript" src="js/text.js"></script> <!-- 画爱心--> <script type="text/javascript" src="js/ga.js" async=""></script> <script type="text/javascript" src="js/heart.js"></script> <!-- 移动div--> <script type="text/javascript" src="js/move.js"></script> <!-- 显示时间 --> <script type="text/javascript" src="js/time.js"></script> <!-- 设置文字跟随鼠标 --> <script type="text/javascript" src="js/makesnake.js"></script></head><body> <!-- thanks for watching! --> <span id="span0" class="spanstyle">T</span><span id="span1" class="spanstyle">h</span> <span id="span2" class="spanstyle">a</span><span id="span3" class="spanstyle">n</span> <span id="span4" class="spanstyle">k</span><span id="span5" class="spanstyle">s</span><span id="span6" class="spanstyle"> </span><span id="span7" class="spanstyle">f</span><span id="span8" class="spanstyle">o</span><span id="span9" class="spanstyle">r</span> <span id="span10" class="spanstyle"> </span><span id="span11" class="spanstyle">w</span> <span id="span12" class="spanstyle">a</span><span id="span13" class="spanstyle">t</span><span id="span14" class="spanstyle">c</span><span id="span15" class="spanstyle">h</span> <span id="span16" class="spanstyle">i</span><span id="span17" class="spanstyle">n</span><span id="span18" class="spanstyle">g</span><span id="span19" class="spanstyle">!</span> <script type="text/javascript"> setTimeout(makesnake, 42000); </script> <!--#Header--> <div id="header" style="opacity:0.85"> <div id="title"> I Love You Forever </div> </div> <!-- #myContent --> <div id="myContent"> <span id="blink" style="display: none;">_</span></div> <div id="contentToWrite" style="display:none"> 一时间不知道从哪说起, <br> 真爱来了，我们要好好把 <br> 一时间不知道从哪说起, <br> 真爱来了，我们要好好把握。不管面临多大的压力，<br> 不管前面的路如何崎岖.<br> 不管经历过什么,我仍坚信最浪漫的事就是和<br> 你一起慢慢变老.<br> 还记得否,曾经的点点滴滴，从相识到现在，<br> 从冷漠到关心,从谢绝到依赖，从生疏到相爱,<br> 一切似乎都是那么遥远,又似乎那么触手可及.<br> 正如某人说的那样,但求岁月静好,现世安稳.<br> 一生守候不是一句简单而苍白的山盟海誓，<br> 而是无数个平淡的日子同舟共济，相濡以沫.<br> 相信右下角的计时器,将永远继续下去,直至数据溢出.<br> <br> -----------------------Just for You, YaRu<br> </div> <script type="text/javascript"> writeContent(true); </script> <!-- #container --> <div id="container"> <ul id="myRoundabout" class="roundabout-holder" style="padding: 0px; position: relative; z-index: 100;"> <li class="roundabout-moveable-item roundabout-in-focus" current-scale="1.0000" style="position: absolute; left: 122px; top: 87px; width: 350px; height: 222px; opacity: 1; z-index: 400; font-size: 16px;"><img src="img/1.jpg" alt=""></li> <li class="roundabout-moveable-item" current-scale="0.7927" style="position: absolute; left: -0.4px; top: 110px; width: 277.445px; height: 175.9794px; opacity: 1; z-index: 296; font-size: 12.68px;"><img src="img/2.jpg" alt=""></li> <li class="roundabout-moveable-item" current-scale="0.4573" style="position: absolute; left: 473.8px; top: 147.2px; width: 160.055px; height: 101.5206px; opacity: 1; z-index: 129; font-size: 7.32px;"><img src="img/3.jpg" alt=""></li> <li class="roundabout-moveable-item" current-scale="0.4573" style="position: absolute; left: -39.8px; top: 147.2px; width: 160.055px; height: 101.5206px; opacity: 1; z-index: 129; font-size: 7.32px;"><img src="img/4.jpg" alt=""></li> <li class="roundabout-moveable-item" current-scale="0.7927" style="position: absolute; left: 317px; top: 110px; width: 277.445px; height: 175.9794px; opacity: 1; z-index: 296; font-size: 12.68px;"><img src="img/5.jpg" alt=""></li> </ul> </div> <script type="text/javascript"> setTimeout(move, 15000); </script> <!-- #bg --> <div id="bg"> <canvas id="garden" width="1583" height="709"><c style="color: #FFF; text-shadow:2px 3px 3px #222; font-family:Microsoft YaHei; font-size:50px">你的浏览器过时了,试试火狐吧!</c></canvas> </div> <!-- #time --> <div id="time"> <span id="show"></span> <script type="text/javascript"> setTimeout("showTime()", 40000); </script> </div> </body> 🏠CSS样式代码 /* Global properties ======================================================== */ body { background:#6f599c; background-image:url(../images/bg.jpg) ; text-align:left; } /* Global Structure ============================================================= */ /* Header */ #header{ position:absolute; left:0px; top:5px; overflow:hidden; height:70px; font-family:Microsoft YaHei; font-weight: 900; font-size:40px; padding-bottom:5px; width: 100%; filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; } #myContent{ position:absolute; left:80px; top:130px; overflow:hidden; text-shadow: 2px 3px 3px #000; font-family:Microsoft YaHei; font-style:italic; font-weight:500; font-size:20px; color:#CCCCCC; } #container{ overflow:hidden; position:absolute; left:630px; top:220px; width:650px; opacity:0; filter:alpha(opacity=0.7) } #title{ position:absolute; left:28%; top:0px; padding:10px; overflow:hidden; text-shadow: 2px 3px 3px #222; color:#CCCCCC; } #footer { position:absolute; left:32%; top:91%; overflow:hidden; text-shadow: 2px 3px 3px #222; font-family:Microsoft YaHei; font-style:italic; font-size:20px; color:#CCCCCC; } #time{ position:absolute; left:750px; top:400px; overflow:hidden; } #show{ color:#CCCCCC; text-shadow: 2px 3px 3px #222; font-family:Microsoft YaHei; font-style:italic; font-size:20px; } #bg{ overflow:hidden; } .roundabout-holder { width:600px; height:400px; margin:0 auto; } .roundabout-moveable-item { width: 350px; height: 222px; cursor: pointer; border:3px solid #ccc; border:3px solid rgba(0, 0, 0, 0.08); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; } .roundabout-moveable-item img{ width:100%; } .roundabout-in-focus { border:3px solid rgba(0, 0, 0, 0.2); } ol, ul { list-style: none; } img { vertical-align:top; } .spanstyle{ color:#CCFF99; font-family:courier; text-shadow: 2px 2px 1px #222; font-style:italic; font-weight:600; font-size:20px; position:absolute; /* ç»å¯¹å®šä½ */ top:-50px; overflow:hidden; }
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
版权声明：本文标题：HTML实现表白biu爱心特效 (程序员专属情人节表白网站) 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1687009522a128269.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论