CSS3 可以在美化網(wǎng)頁、增強交互性等方面發(fā)揮重要作用，讓頁面更加生動有趣。而其中，CSS3 的形變能力可謂強大且神奇，其中就有一個特效叫做“心碎”。

通過 CSS3 的 transform 屬性，我們可以將一個元素旋轉(zhuǎn)、縮放、平移等，給它帶來各種不同的效果。而心碎特效，其實就是通過將元素變形成一個心形，再通過 CSS3 的 transition 屬性，使其在某個時刻瞬間變形成多個小心形，從而達到“心碎”的效果。

/* 定義一個元素 */ 
.broken-heart {
width: 100px;
height: 100px;
position: relative;
transform: rotate(45deg);
overflow: hidden;
}
/* 給這個元素加上一個偽元素來表示心形 */ 
.broken-heart::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: red;
border-radius: 50% 50% 0 0; /* 這樣就可以把正方形變成心形了 */
transform: rotate(-45deg);
}
/* 當元素被點擊時，給它加上一個動畫效果 */ 
.broken-heart:active::before {
transform: scale(1.3) rotate(-45deg);
transition: all .3s ease-in-out;
border-radius: 50%;
box-shadow: 0 0 0 100px pink;
}
/* 現(xiàn)在可以看到一個帶有“心碎”效果的元素了 */

然而，這個效果在 Chrome 中卻沒有產(chǎn)生預期的效果，而是出現(xiàn)了一些奇怪的bug。比如 轉(zhuǎn)換水平縮放時，心形變?yōu)榱藞A形。這讓許多前端程序員感到不解和失望。

但是 CSS3 心碎這個效果依然是幾乎所有前端程序員都很鐘愛的效果之一，只是實現(xiàn)上有些困難和兼容性不夠而已。所以，我們可以通過各種技巧來實現(xiàn)相似的效果，比如用 SVG 來代替 CSS3，或者使用 jQuery 等 JavaScript 庫來實現(xiàn)。總之，CSS3 的心碎效果雖然實現(xiàn)起來有些困難，但它仍然是一種非常有用和受歡迎的效果。