HTML愛心免費(fèi)動(dòng)畫是一款非常有趣且可愛的代碼，可以在網(wǎng)頁中添加一個(gè)跳動(dòng)的愛心，為網(wǎng)站增添情趣。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML愛心動(dòng)畫</title>
<style>
.heart {
position: relative;
width: 100px;
height: 90px;
}
.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%;
}</head>
<body>
<div class="heart"></div>
</body>
</html>這個(gè)代碼中的關(guān)鍵部分就在CSS樣式中，通過偽元素:before和:after，使用了transform屬性來達(dá)到讓心形傾斜的效果，同時(shí)可以讓兩個(gè)偽元素粘合在一起成為一個(gè)完整的心形。通過調(diào)整偽元素的位置和大小，可以達(dá)到不同的心形大小和形狀。