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

最新推荐文章于 2024-01-02 20:14:24 发布

lukamao

最新推荐文章于 2024-01-02 20:14:24 发布

阅读量743

点赞数 2

本文链接：https://blog.csdn.net/MarcoAsensio/article/details/104315406

版权

今天是庚子年正月二十一，公历 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>