1、打开运行电脑中安装的dreamware软件，打开“文件”菜单中的“新建”功能，创建一个新的HTML文件。
2、在body标签中加入如下的html代码，设置显示爱心的对象。
3、在head标签中添加css样式标签＜style>，并写入CSS样式，把爱心的对象变成红色的方块。
4、给这个元素设置伪元素CSS样式。
5、这个爱心的一半就出来了，再给它进行一下角度的45度旋转。
6、接下来只需要再添加另外一边的爱心，再把两个叠加在一起就完成了。
vs2015运行html爱心代码方法。1、建立相应文件夹，打开VS软件，新建空白html5模板。
2、开始写爱心的代码（html5+css）。
3、制作图形需要用到四个基础图形（也就是四个块），一个大的正方形（为主块），在大的正方形里面建立三个小正方形（前两个正方形需要将其修改为圆形）。
4、写让爱心动起来的JavaScript代码。
5、在浏览器上执行代码，就可以得到一颗会跳动的爱心。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>a heart demo </title>
<style type="text/css" rel="stylesheet">
.container {
width: 300px
height: 240px
margin: auto
position: relative
}
@keyframes heartbeat-left {
0%, 100% {
transform: scale(0.95) rotate(-45deg)
transform-origin: 0 100%
}
50% {
transform: scale(1.00) rotate(-45deg)
transform-origin: 0 100%
}
}
@keyframes heartbeat-right {
0%, 100% {
transform: scale(0.95) rotate(45deg)
transform-origin: 100% 100%
}
50% {
transform: scale(1.00) rotate(45deg)
transform-origin: 100% 100%
}
}
.left, .right {
position: absolute
top: 0
width: 150px
height: 240px
border-radius: 150px 150px 0 0
background: lightcoral
animation-iteration-count: infinite
animation-delay: 500ms
animation-timing-function: cubic-bezier(0, 0, 0, 1.74)
animation-play-state: running
animation-duration: 2000ms
}
.left {
animation-name: heartbeat-left
left: 150px
transform: rotate(-45deg)
transform-origin: 0 100%
box-shadow: inset 6px 6px 0 6px rgba(255, 255, 255, 0.1)
}
.right {
right: 150px
transform: rotate(45deg)
animation-name: heartbeat-right
transform-origin: 100% 100%
box-shadow: inset -6px -6px 0 6px rgba(255, 255, 255, 0.1)
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
