欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

送你三个珍藏已久的网页,一份迟到的情人节祝福

程序员文章站 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

还在等什么,快拿去发给你的那个她吧!