HTML5動態心形代碼是可以在網頁上顯示出一個美麗的動態心形的程序代碼。一般來說，動態心形代碼是由HTML5、CSS3和JavaScript代碼構成的。
<!DOCTYPE html>
<html>
<head>
<style>
#heart {
position: absolute;
width: 100px;
height: 90px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
</style>
</head>
<body>
<div id="heart"></div>
<script>
var heart = document.querySelector("#heart");
var scale = 1;
var maxScale = 1.2;
var minScale = 0.8;
setInterval(function() {
if (scale >maxScale) {
scale = maxScale;
} else if (scale< minScale) {
scale = minScale;
}
heart.style.transform = "scale(" + scale + ")";
scale += 0.02;
}, 50);
</script>
</body>
</html>在以上代碼中，可以看到HTML部分定義了一個包含id為“heart”的div標簽，CSS部分定義了心形的樣式，使用了:before和:after偽元素，分別控制心形的兩邊。JavaScript部分則定義了心形不斷放大縮小的動畫效果。
上一篇html5動漫主題代碼