HTML5是當前最流行的網頁開發語言，可在網頁中制作出各種精美的效果，比如心形效果。接下來，我們就來學習如何使用HTML5在網頁中制作出心形代碼。

<div class="heart">
<div class="hearts"></div>
<div class="hearts1"></div>
</div>

以上代碼中，我們使用了<div>標簽來創建一個容器，并為其添加了一個類名heart。然后，我們又在容器中嵌套了2個<div>標簽，分別為hearts和hearts1，并沒有給它們添加任何的內容。

.heart{
width:30px;
height:30px;
position:relative;
margin:30px auto;
transform:rotate(-45deg);
animation:love 1.5s ease infinite;
}
.heart .hearts,.heart .hearts1{
width:20px;
height:20px;
position:absolute;
background:red;
border-radius:50%;
}
.heart .hearts{
top:0;
left:10px;
}
.heart .hearts1{
top:10px;
left:0;
}
@keyframes love{
0%{transform:scale(1)}
50%{transform:scale(1.1)}
100%{transform:scale(1)}
}

以上代碼為我們設置了heart類名的樣式，通過width和height來設置容器的大小，而position:relative和margin:30px auto則是讓容器水平居中。同時我們使用了CSS3中的基本變換屬性transform來使其傾斜45度，之后通過CSS3動畫@keyframes來制作了愛心跳動的效果。

同樣的，我們也為hearts和hearts1類名分別定義了樣式和位置。將hearts和hearts1分別設置在容器的上部和左部實現了心形的效果。

最后，我們在網頁中嵌入上述HTML和CSS代碼，就可以展示出我們制作的心形了。