HTML畫愛心動畫源代碼
<html><head><title>愛心動畫</title><style>#heart {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
animation: heartbeat 1s ease-in-out infinite;
transform: translate(-50%, -50%);
}
#heart:before, #heart:after {
content: "";
position: absolute;
background-color: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
}
#heart:before {
height: 100px;
width: 100px;
top: -50px;
left: 0;
}
#heart:after {
height: 100px;
width: 100px;
top: 0;
left: -50px;
}
@keyframes heartbeat {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
</style></head><body><div id="heart"></div></body></html>以上代碼實現了一個紅色的愛心，通過動畫效果使其呈現跳動的感覺。其中主要采用了CSS3的transform和animation屬性，實現了動畫效果的實現，讓愛心有了生動的呈現。希望本文章對HTML/CSS愛好者們有所啟發，也希望大家能夠喜歡這個愛心動畫。