近年來，網頁設計中經常使用的CSS心形Div變成了一種很流行的設計元素。CSS制作的心形可以應用于網頁背景，LOGO，圖標等設計，是一種優美、彩色的設計元素。
現在，許多人想要實現一個可縮放的心形Div對象，以滿足在不同設備上顯示的要求。下面，我們將介紹如何使用CSS編寫一個可縮放的心形Div。
<!DOCTYPE html>
<html>
<head>
<title>CSS 心形縮放</title>
<style type="text/css">
.heart-div {
position: relative;
display: inline-block;
width: 100px;
height: 90px;
animation: grow 2s ease-in-out infinite alternate;
}
.heart-div:before,
.heart-div:after {
content: "";
position: absolute;
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart-div:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes grow {
0%{ transform: scale(1);}
100%{ transform: scale(2);}
}
</style>
</head>
<body>
<div class="heart-div"></div>
</body>
</html>CSS樣式中，.heart-div是根據position屬性進行定位的div。.heart-div:before和.heart-div:after是創建心形的:before和:after內容偽類。width和height屬性決定了偽類的大小和形狀。
此外，我們通過animation動畫來實現偽類的縮放效果。使用transform屬性實現縮放效果，并使用transform-origin屬性實現偽類的旋轉。
通過使用上述CSS代碼，我們成功地實現了一個可縮放的CSS心形Div，為網頁設計提供了新的設計元素。
上一篇css當前屏位置居中