制作一个图片跟随鼠标移动

今天我们要制作一个跟随鼠标移动的爱心

我们需要先创建一个HTML文档，并保存文档到桌面。现在进行HTML的布局，布局非常简单，只需要两个div标签和一个和h1标签就可以了。给每个标签一个ID方便我们对它的元素进行设置。

<div id="boss"></div>
<h1 id="box"></h1>
<div id="heart"></div>

现在我们需要设置每个标签的样式。在head标签中给一个style标签。style标签的作用是将CSS样式插入HTML文档中。link标签则是将CSS文档插入HTML文档中。各位小伙伴需要分清楚哦！

在style标签中填写我们需要设置的CSS样式。我们给第一个div标签一个背景颜色和宽高，因为我们会有一个h1作为显示鼠标的坐标，所以我们不可以直接使用body标签作为背景。设置完第一个div标签，我们来设置h1标签，h1标签需要作为显示框出现在页面中，所以我们要给h1标签一个边框（边框的样式可以自己改变，作者为了方便就使用最常用的实线）。有边框还要有宽高，在设置一个外边距，这样基本的样式就完成了。

这时候就有人会问，那第二个div标签怎么办呢？别急嘛，第二个div标签是用来放爱心图片的。同时我们也需要设置图片的宽高，和定位。定位是为了让图片跟随鼠标指针移动具体的代码如下。

		#boss{
			width: 800px;
			height:680px;
			margin:auto;
			background:#00C9FF;
		}
		#heart{
			width: 200px;
			height: 166px;
			background: url( &