CSS是前端開發(fā)中非常重要的一部分，它可以讓我們?yōu)榫W(wǎng)站添加各種炫酷的效果。在這篇文章中，我將教你如何用 CSS 60 行代碼實(shí)現(xiàn)一個(gè)非常有趣的效果：愛心。

.heart {
width: 50px;
height: 50px;
background: #F00;
position: relative;
transform: rotate(45deg);
}
.heart:before,
.heart:after {
content: "";
width: 50px;
height: 50px;
background: #F00;
position: absolute;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
top: 0;
left: 25px;
}

我們首先創(chuàng)建一個(gè)正方形（width 和 height 均為 50px）并將其背景顏色設(shè)置為紅色（#F00）。接下來，我們將其旋轉(zhuǎn) 45 度（transform: rotate(45deg);）來形成愛心的形狀。

為了創(chuàng)建愛心的兩側(cè)，我們使用 before 和 after 偽元素，并將它們的 content 屬性設(shè)置為空。我們?cè)俅蝿?chuàng)建一個(gè)寬高為 50px 的紅色方塊并使用絕對(duì)定位在愛心的上方和右方定位。這樣我們就獲得了兩個(gè)紅色方塊，它們一起形成了一個(gè)愛心。

這只是一種簡(jiǎn)單而有趣的方法，你可以根據(jù)需要對(duì)其進(jìn)行修改。例如，使用 CSS 動(dòng)畫在愛心上添加一些動(dòng)態(tài)效果。希望這篇文章能對(duì)你有所幫助！