CSS3作為一種強大的前端技術，實現了眾多動畫效果，其中心碎的動畫效果引起了廣泛的關注。

.heart{
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after{
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}

上面的代碼實現了一個心形圖案，接下來，我們將實現一個心碎的動畫效果。

.heart{
position: relative;
width: 100px;
height: 90px;
animation: break .5s linear forwards;
}
.heart:before,
.heart:after{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
animation: break-heart .5s linear forwards;
}
.heart:after{
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
animation: break-heart2 .5s linear forwards;
}
@keyframes break-heart{
0%{transform: rotate(-45deg);}
100%{transform: rotate(-135deg);}
}
@keyframes break-heart2{
0%{transform: rotate(45deg);}
100%{transform: rotate(135deg);}
}
@keyframes break{
0%{transform: scale(1);}
50%{transform: scale(.5);}
100%{transform: scale(.8);}
}

通過增加動畫的屬性，我們實現了一個心形圖案破碎的效果，讓整個動畫更加生動有趣。

如此簡單的 CSS3 動畫效果，卻擁有無限可能，可以讓你的頁面更加生動有趣，加入前端技術的學習一定會讓你變得更加專業有趣。