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