CSS3是前端開發(fā)必不可少的技術(shù)之一，它能夠為網(wǎng)頁增加各種豐富的效果，其中之一就是使用CSS3畫心。

.heart {
width: 50px;
height: 50px;
position: relative;
animation: pulse 2s ease infinite;
transform: translate3d(0, 0, 0);
}
.heart:before,
.heart:after {
content: "";
position: absolute;
top: 0;
left: 25px;
width: 25px;
height: 40px;
background: #fc2e66;
border-radius: 25px 25px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

上面的代碼就是用CSS3畫心的代碼，.heart是心形框的類名，使用偽元素before和after畫出兩個三角形來組成心形。再通過動畫效果讓整個心形框產(chǎn)生放大縮小的效果，就實現(xiàn)了使用CSS3畫心。