CSS在頁面佈局中扮演非常重要的作用，CSS不僅可以美化HTML搭建的頁面，還可以製作出各種酷炫的效果，作為一個前端人員，你會用CSS畫愛心嗎？這篇文章就跟大家分享如何用HTML和CSS繪製心形，以及CSS3實現愛心特效的程式碼，有一定的參考價值，有興趣的朋友可以看看。
用html和CSS畫愛心需要用到很多CSS中的屬性，例如border-radius圓角，position定位，animation動畫等等，如有不清楚的同學可以看看我之前的文章，或造訪CSS影片教學，希望可以幫助你！
實例講解：愛心可以看成是由兩個圓和一個正方形組成，正方形的邊長是圓的直徑。
HTML部分：
用三個div分別表示左邊圓、右邊圓和正方形
<div class="box"> <div class="round1"></div> <div class="round2"></div> <div class="bottom"></div> </div>
CSS部分：
用border-radius:50 %將其設為圓形， 用transform:rotate(45deg)將正方形旋轉45度，將它和圓組合成心形
.box{
width:180px;
height:160px;
margin:100px auto;
animation:size 1s infinite;
animation-direction:alternate;
transition:1s all;
border: 1px solid black;
}
.round1{
width:100px;
height:100px;
border-radius:50%;
background-color:hotpink;
left: 0;
top: 0;
position:absolute;
}
.round2{
width:100px;
height:100px;
border-radius:50%;
background-color:hotpink;
position:absolute;
right: 0;
top: 0;
}
.bottom{
width:100px;
height:100px;
background-color:hotpink;
position:absolute;
top:40px;
left:40px;
transform:rotate(45deg);
}
@keyframes size{
0%{
transform:scale(0.6);
}
100%{
transform:scale(1);
}
}最後用CSS3中的animation動畫實現愛心特效，使愛心可以自動縮放，效果如圖：
以上給大家介紹如何用html和CSS畫愛心，比較簡單，初學者一定要自己動手嘗試，看看你能不能畫出愛心，希望這篇文章對你有幫助！更多相關影片教學請上 CSS3影片教學
更多酷CSS3、html5、javascript特效程式碼，盡在：js特效大全
#以上是圖文詳解如何用html和CSS製作愛心特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！
