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 Forevertitle>
<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>
<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>
<span id="span0" class="spanstyle">Tspan><span id="span1" class="spanstyle">hspan>
<span id="span2" class="spanstyle">aspan><span id="span3" class="spanstyle">nspan>
<span id="span4" class="spanstyle">kspan><span id="span5" class="spanstyle">sspan><span id="span6" class="spanstyle">
span><span id="span7" class="spanstyle">fspan><span id="span8" class="spanstyle">ospan><span id="span9" class="spanstyle">rspan>
<span id="span10" class="spanstyle"> span><span id="span11" class="spanstyle">wspan>
<span id="span12" class="spanstyle">aspan><span id="span13" class="spanstyle">tspan><span id="span14" class="spanstyle">cspan><span id="span15" class="spanstyle">hspan>
<span id="span16" class="spanstyle">ispan><span id="span17" class="spanstyle">nspan><span id="span18" class="spanstyle">gspan><span id="span19" class="spanstyle">!span>
<script type="text/javascript">
setTimeout(makesnake, 42000);
script>
<div id="header" style="opacity:0.85">
<div id="title">
I Love You Forever
div>
div>
<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>
<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>
<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>
<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模板 、等!
以上内容技术相关问题欢迎一起交流学习