代码分享 | 情人节表白黑科技

最新推荐文章于 2025-06-26 14:38:09 发布

鼎道开发者联盟

最新推荐文章于 2025-06-26 14:38:09 发布

阅读量257

点赞数

CC 4.0 BY-SA版权

文章标签：前端

原文链接：https://mp.weixin.qq.com/s/ues5q93DzoAn9DbLky_qpA

在去年年尾的时候，鼎道发布了《活动 | 编程式浪漫，让你的世界永远有烟花~》，和大家分享了如何用技术代码实现烟花和鞭炮，也让大家了解到程序员专属的浪漫。

情人节在即，浪漫的格调仍然在线，今天鼎道就带着大家一步步用 html 实现爱心~

文尾有 C 语言、 html 、python 等技术语言实现的爱心和玫瑰，如已有技术背景或经验的伙伴可以直接拉到尾部自行领取所需代码！

如何创建 html 代码

首先，我们需要在新建的空白 html5 模板上制作基础图形，即四个方块，就可以制作出如下图的爱心啦~

新建一个大的主块

html 代码：

<div id="main"></div>

css 代码：

#main{ width:500px; 
       height:500px; 
       margin:150px auto;  /*这里是将其居中，因为后期要用到position，所以后期我会将其去掉*/
       border:1px solid #F00; /*注意：这是块的边框，这里加边框是为了便于设计时的查看，后期为了美观，我会将其去掉*/
      }

在主块 main 中建立 3 个小块

第一个小块：

html代码：

<div id="main">
<div id="a"> </div>
</div>

css 代码：

#main{ width:500px; 
       height:500px; 
       position:absolute; /*注意：这段也可以写为 position:relative; margin:150px auto; 但是不同的写法最后爱心的起始位置不同。*/
       border:1px solid #F00;
      }
#a{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    left:0; 
    border-radius:50%;  /*将a块正方形修改为圆形,并将其放在大正方形内测左上角*/
   }

第二个小块：

html代码：

<div id="main">
    <div id="a"></div>
    <div id="b"></div>
</div>

css 代码：

#main{ width:500px;
       height:500px; 
       position:absolute;
       border:1px solid #F00;
      }
#a { width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    left:0; 
    border-radius:50%;
   }
#b { width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    right:0; 
    border-radius:50%;   /*将b块正方形改为圆形，并将其放大正方形内测右上角*/
   }

第三个小块：

html代码：

<div id="main">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</div>

css 代码：

#main{ width:500px;
       height:500px; 
       position:absolute;
      }
#a{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    left:0; 
    border-radius:50%;
   }
#b{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    right:0; 
    border-radius:50%;
   }
#c{ width:300px;
    height:300px;
    background:#F00; 
    transform:translate(100px,100px) rotate(45deg);  /*将c块正方形旋转45度*/
  }

完成以上全部的代码输入后，我们就可以得到一个亲手用技术语言绘制的爱心~

让爱心动起来

只是绘制一个小爱心岂不是很“单调”，我们程序员大大的浪漫腔调远不仅此哦！

当我们完成了爱心的基础 html 代码，只需要输入以下的 JavaScript 代码即可让爱心动起来，但是也需要注意，在写入 JS 的时候，一定要保证 ID 是一致的。

var fl = document.getElementById('main');
var chroX = document.documentElement.clientWidth;  //yemian整个的高宽
var chroY = document.documentElement.clientHeight;
var offsetLeft = fl.offsetLeft;   //盒子的位置
var offsetTop = fl.offsetTop;
var timer = 0;
console.log(offsetTop)
var x = 20;
var y = 20;    //x,y可以看作是爱心移动的速度。
window.onresize = function(){
    chroX = document.documentElement.clientWidth;  //yemian整个的高宽
    chroY = document.documentElement.clientHeight;
}
function move(){
    offsetLeft += x;
    offsetTop += y;
    fl.style.left = offsetLeft  + 'px';
    fl.style.top = offsetTop  + 'px';
    console.log(chroY)
}
window.onload = function(){
   timer = setInterval(function(){
        move();
        if(offsetTop+100 > chroY || offsetTop < 0){
            y = -y;
        }
        if(offsetLeft+100 > chroX || offsetLeft <0){
            x = -x;
        }
    },10)
}
fl.onmouseenter = function(){
    clearInterval(timer)
}
fl.onmouseleave = function(){
    window.onload();
}

完成以上全部动作之后，就可以在浏览器上执行这个代码！这时候你就能得到一颗跳动的心啦~小鹿乱撞的氛围这不就轻松拿捏了吗？