在去年年尾的时候，鼎道发布了《活动 | 编程式浪漫，让你的世界永远有烟花~》，和大家分享了如何用技术代码实现烟花和鞭炮，也让大家了解到程序员专属的浪漫。
情人节在即，浪漫的格调仍然在线，今天鼎道就带着大家一步步用 html 实现爱心~
文尾有 C 语言、 html 、python 等技术语言实现的爱心和玫瑰，如已有技术背景或经验的伙伴可以直接拉到尾部自行领取所需代码！
**如何创建 html 代码**
首先，我们需要在新建的空白 html5 模板上制作基础图形，即四个方块，就可以制作出如下图的爱心啦~
新建一个大的主块
html 代码：
<div id="main"></div>
css 代码：
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 代码：
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 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();
}
完成以上全部动作之后，就可以在浏览器上执行这个代码！这时候你就能得到一颗跳动的心啦~小鹿乱撞的氛围这不就轻松拿捏了吗？
**更多代码**
我们还为大家准备了 C 语言、 html 以及 python 环境下实现玫瑰、爱心的代码。
只需要关注公众号【鼎道开发者联盟】并回复【情人节】，即可获得以上全部的源代码哦~
鼎道专注于研发一款“以人为本”的操作系统，我们需要时刻保持着严谨的态度，力争为用户带来更安全、绿色、便捷的操作体验。但同时，我们也有独特的“消遣”方式，未来我们会分享更多新鲜有趣的代码和资讯，以及更多新兴技术内容，欢迎大家持续关注鼎道生态和我们一起探讨研究哦~
****如果你有更好的情人节元素的实现代码或技巧，或者想要分享你实现的玫瑰或爱心的演示图片/视频，均可以向【鼎道开发者联盟】投稿哦！ 偷偷说，参与者有机会获得价值200元的实体礼物哦~
