HTML是一種超文本標(biāo)記語言，能夠用來創(chuàng)建網(wǎng)頁及其它類似的文檔。其中心形跳動(dòng)代碼也是HTML頭號(hào)玩家之一，是網(wǎng)頁設(shè)計(jì)師熟練掌握的高級(jí)技能之一。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>心形跳動(dòng)代碼</title>
<style>
.heart span {
position: absolute;
width: 20px;
height: 20px;
background: #f00;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
animation: beats 1s infinite ease-in-out;
-webkit-animation: beats 1s infinite ease-in-out;
-moz-animation: beats 1s infinite ease-in-out;
-o-animation: beats 1s infinite ease-in-out;
}
.heart span:nth-child(1) {
left: 50px;
}
.heart span:nth-child(2) {
right: 50px;
}
.heart:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #f00;
border-radius: 50%;
top: -30px;
left: 50%;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
@keyframes beats {
0% {
transform: rotate(45deg) scale(1);
}
50% {
transform: rotate(45deg) scale(0.6);
}
100% {
transform: rotate(45deg) scale(1);
}
}
</style>
</head>
<body>
<div class="heart">
<span></span>
<span></span>
</div>
</body>
</html>通過以上代碼，我們就可以實(shí)現(xiàn)一個(gè)心形跳動(dòng)的效果。值得一提的是，通過CSS3中的animation和transform屬性，可以實(shí)現(xiàn)無限循環(huán)的心跳動(dòng)畫，讓HTML設(shè)計(jì)更為生動(dòng)有趣。