HTML实现表白biu爱心特效 (程序员专属情人节表白网站)

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

📂文章目录

二、📚网站介绍

📒网站文件方面：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><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><title>I Love You Forever</title><metaname="author"content="Mike"><linkrel="stylesheet"href="css/style.css"type="text/css"media="all"><!--导库--><scripttype="text/javascript"src="js/jquery.js"></script><!-- 图片幻灯片效果--><scripttype="text/javascript"src="js/roundabout.js"></script><scripttype="text/javascript"src="js/roundabout_shapes.js"></script><scripttype="text/javascript"src="js/gallery_init.js"></script><!-- 下雪--><scripttype="text/javascript"src="js/snowstorm.js"></script><!-- 打字机效果--><scripttype="text/javascript"src="js/text.js"></script><!-- 画爱心--><scripttype="text/javascript"src="js/ga.js"async=""></script><scripttype="text/javascript"src="js/heart.js"></script><!-- 移动div--><scripttype="text/javascript"src="js/move.js"></script><!-- 显示时间 --><scripttype="text/javascript"src="js/time.js"></script><!-- 设置文字跟随鼠标 --><scripttype="text/javascript"src="js/makesnake.js"></script></head><body><!-- thanks for watching! --><spanid="span0"class="spanstyle">T</span><spanid="span1"class="spanstyle">h</span><spanid="span2"class="spanstyle">a</span><spanid="span3"class="spanstyle">n</span><spanid="span4"class="spanstyle">k</span><spanid="span5"class="spanstyle">s</span><spanid="span6"class="spanstyle"></span><spanid="span7"class="spanstyle">f</span><spanid="span8"class="spanstyle">o</span><spanid="span9"class="spanstyle">r</span><spanid="span10"class="spanstyle"></span><spanid="span11"class="spanstyle">w</span><spanid="span12"class="spanstyle">a</span><spanid="span13"class="spanstyle">t</span><spanid="span14"class="spanstyle">c</span><spanid="span15"class="spanstyle">h</span><spanid="span16"class="spanstyle">i</span><spanid="span17"class="spanstyle">n</span><spanid="span18"class="spanstyle">g</span><spanid="span19"class="spanstyle">!</span><scripttype="text/javascript">setTimeout(makesnake,42000);</script><!--#Header--><divid="header"style="opacity:0.85"><divid="title">
                I Love You Forever
            </div></div><!-- #myContent --><divid="myContent"><spanid="blink"style="display: none;">_</span></div><divid="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><scripttype="text/javascript">writeContent(true);</script><!-- #container --><divid="container"><ulid="myRoundabout"class="roundabout-holder"style="padding: 0px;position: relative;z-index: 100;"><liclass="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;"><imgsrc="img/1.jpg"alt=""></li><liclass="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;"><imgsrc="img/2.jpg"alt=""></li><liclass="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;"><imgsrc="img/3.jpg"alt=""></li><liclass="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;"><imgsrc="img/4.jpg"alt=""></li><liclass="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;"><imgsrc="img/5.jpg"alt=""></li></ul></div><scripttype="text/javascript">setTimeout(move,15000);</script><!-- #bg --><divid="bg"><canvasid="garden"width="1583"height="709"><cstyle="color: #FFF;text-shadow:2px 3px 3px #222;font-family:Microsoft YaHei;font-size:50px">你的浏览器过时了,试试火狐吧!</c></canvas></div><!-- #time --><divid="time"><spanid="show"></span><scripttype="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.如果我的博客对你有帮助

请 “👍点赞” “✍️评论” “💙收藏”

一键三连哦！

```
💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 
```
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

标签： html网页模版学生网页作业网页设计与制作

本文转载自: https://blog.csdn.net/qq_38512571/article/details/127202537
版权归原作者 web网站建设 所有，如有侵权，请联系我们删除。

HTML实现表白biu爱心特效 (程序员专属情人节表白网站)

📂文章目录

二、📚网站介绍

三、🔗网站效果

▶️1.视频演示

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

🏠CSS样式代码

五、🎁更多源码

发表评论

“HTML实现表白biu爱心特效 (程序员专属情人节表白网站)”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航