昨天教各位使用 border-radius 來畫太極圖，今天則是要教各位一樣是使用圓角效果來愛心。
我們只需要一個 div 區塊就可以了：
檢視原始碼 HTML
1 2 3 | <body> <div class="heart"></div> </body> |
然後指定區塊的寬高：
檢視原始碼 CSS
1 2 3 4 5 | .heart { position: relative; width: 140px; height: 115px; } |
一樣是將愛心分成左右兩區塊，一樣是先用 ::before 擬元素(Pseudo-elements)來產生左邊的區塊：
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 | .heart::before { content: ""; position: absolute; left: 70px; top: 0; width: 70px; height: 115px; background: red; border-radius: 50px 50px 0 0; } |
因為只有設定左上及右上的圓角效果，所以就變成圓頭的柱子了：
接著筆者要改變它的旋轉中心點來把它往左旋轉 45 度：
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .heart::before { content: ""; position: absolute; left: 70px; top: 0; width: 70px; height: 115px; background: red; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } |
transform-origin 可以改變元素的中心點。它跟 background-position 一樣是接受兩個值，第一個是設定水平，第二個是設定垂直。預設是以 center center 為主，現在筆者將它改成在左下方：
右邊的部份也一樣，但只是旋轉中心點改在右下，並往右旋轉：
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .heart::after { content: ""; position: absolute; top: 0; left: 0; width: 70px; height: 115px; background: red; border-radius: 50px 50px 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } |
當兩邊都產生完後，一個紅通通的愛心就出現囉：
什麼~中和的鐘先生問說怎麼不會動...沒關係，補上個 animation 的動畫效果給它：
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | .heart { -webkit-animation: jump 1s infinite ease-out; -moz-animation: jump 1s infinite ease-out; -o-animation: jump 1s infinite ease-out; animation: jump 1s infinite ease-out; } @-webkit-keyframes jump { 0%, 60%, 75%, 90%, 100% { -webkit-transform: scale(1); } 15% { -webkit-transform: scale(0.6); } 30% { -webkit-transform: scale(1); } 45% { -webkit-transform: scale(0.7); } } @-moz-keyframes jump { 0%, 60%, 75%, 90%, 100% { -moz-transform: scale(1); } 15% { -moz-transform: scale(0.6); } 30% { -moz-transform: scale(1); } 45% { -moz-transform: scale(0.7); } } @-o-keyframes jump { 0%, 60%, 75%, 90%, 100% { -o-transform: scale(1); } 15% { -o-transform: scale(0.6); } 30% { -o-transform: scale(1); } 45% { -o-transform: scale(0.7); } } @keyframes jump { 0%, 60%, 75%, 90%, 100% { transform: scale(1); } 15% { transform: scale(0.6); } 30% { transform: scale(1); } 45% { transform: scale(0.7); } } |
透過 transform 的 scale(x, y) 來改變愛心的大小，讓整個動畫的看起來就像是噗通噗通的跳一樣：
有沒有很新鮮的感覺呢！快來自訂你的心吧~
See the Pen [CSS3]用 CSS3 畫圖示 - 愛心 by abgne.tw (@abgne-tw) on CodePen.