送你三个珍藏已久的网页,一份迟到的情人节祝福
程序员文章站
2024-03-14 12:50:22
...
今天是庚子年正月二十一,公历 2020 年 2 月 14 日,一个没有什么特殊意义的日子。好吧,我不欺骗自己了,今天是情人节,虽然没有情人,但是节还是要过的,就在这里送大家我珍藏已久的三个表白页面吧,祝有对象的 999,没有对象的早日脱单!
1.爱情树
程序员最经典的表白页面,没有之一,我曾经不止一次的见过,就找到了这个的源码存了起来,亲测有效,女生一定会心动的,尤其是非计算机专业的同学。整个树是动态生成的,还伴有背景音乐。我默认是放的林宥嘉的你是我的眼。
效果预览
示例代码
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<audio autoplay="autopaly">
<source src="nishiwodeyan.mp3" type="audio/mp3"/>
</audio>
<div id="main">
<div id="wrap">
<div id="text">
<div id="code">
<font color="#FF0000"></font>
</div>
</div>
<div id="clock-box">
<span><font color="#666666">亲爱的,我们相识已经是</font></span>
<div id="clock"></div>
</div>
<canvas id="canvas" width="1100" height="680"></canvas>
</div>
</div>
</body>
</html>
文末留完整代码下载链接。
2.3D心形 + 旋转图片
整体是 3D 的立体效果,六张照片构成一个立方体,并可以旋转,有女朋友的快把女朋友的照片放上发给她吧,相信她一定会更加爱你的!
效果预览
因为博主目前还没有女朋友,所以先用我女神花粥的图片来代替了。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="heart">
<div class="cube">
<div>
<img src="images/1.jpg" width="100" height="100" alt="">
</div>
</div>
</div>
</body>
</html>
文末留完整代码下载链接。
3.动态背景心形
我个人觉得最浪漫的页面了,没有之一,我一个码农看了都少女心爆棚。我看了一下源码,2000 多行,图中的文字和页面都是可以改的,文末留下载链接。
效果预览
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<canvas id="sakura" style=" position: absolute ;z-index: 1"></canvas>
<div style="position: absolute ;z-index: 9999" id="mainDiv">
<div id="content">
<div id="code"></div>
<div id="loveHeart">
<canvas id="garden"></canvas>
<div id="words">
<div id="messages">
LRP,I LOVE YOU!
<div id="elapseClock"></div>
</div>
<div id="loveu">
Love u forever and ever.<br/>
<div class="signature">- ML</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
友情提示,部署到服务器上更佳呦~
下载地址
链接:https://pan.baidu.com/s/1H0xuDR6RmkS9ZCm9DBTDQA
提取码:0mvm
还在等什么,快拿去发给你的那个她吧!