【HTML实战】把爱心代码放在自己的网站上是一种什么体验？

置顶

「已注销」

已于 2024-03-21 23:16:32 修改

阅读量2.8w

点赞数 200

分类专栏： # HTML 文章标签： html 前端

于 2022-11-12 14:38:50 首次发布

本文链接：https://blog.csdn.net/huawuque404/article/details/127810748

版权

花无缺

👨‍💻个人主页：@花无缺
欢迎点赞👍 收藏⭐ 留言📝 加关注✅!
本文由 花无缺 原创

收录于专栏【HTML】

最近随着电视剧《点燃我温暖你》的火热播出，剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈，作为一个喜欢动手实践的我来说正是一个大好机会啊，于是我就把代码搬到了自己的网站上，源码我也放在了我的GitHub上，大家有需自取哦~💗

仓库地址：『https://github.com/he-weilai/love-code』
也欢迎大家star Issues fork 并pr哦，一起来开发更多好看的样式或者动态效果吧！

网站效果：『https://huawuque404.com/love-code/love4.html』

后面有时间的话我会将各式各样的爱心代码更新在这个仓库里，如果大家感兴趣的话就来和我一起创造爱心吧~😍

今天周末了，大家都要好好吃饭，好好睡觉哦！🎉

拜拜！

GitHub进不去的话，源代码这也有一份，有点长：

<!DOCTYPE html>
<html>

<head>
    <title> 爱心代码 </title>
    <meta charset="utf-8">
    <meta name="Author" content="花无缺">
    <meta name="Keywords" content="爱心代码">
    <meta name="Description" content="爱心代码">
    <link rel="shortcut icon" href="../picture/爱心.png" type="image/x-icon">
    <style>
        html,
        body {
     
            height: 100%;
            padding: 0;
            margin: 0;
            background: #000;
        }

        canvas {
     
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>

</head>

<body>
    <canvas id="pinkboard"></canvas>
    <script>

        var settings = {
     
            particles: {
     
                length: 500,
                duration: 2,
                velocity: 100,
                effect: -0.75,
                size: 30,
            },
        };


        (function () {
      var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {
      window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = function (h, e) {
      var d = new Date()