圖文詳解如何用html和CSS製作愛心特效

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中文網其他相關文章！