在現代網頁中，我們經常可以在一些文章、視頻和圖片頁面上找到”Like”按鈕，並且通過點擊該按鈕來表示自己對該內容的喜歡或者不喜歡。大部分”Like”按鈕是純文本按鈕或者圖片按鈕，如果你想讓它們具有特別的動畫特效，那么我們就需要用到CSS3或者JavaScript了。本文給大家帶來一個帶有愛心散列動畫的Like按鈕，主要采用了SVG和CSS3這兩個技術。當你點亮Like按鈕時，按鈕的四周將會散發出多個五彩絢麗的愛心。
效果預覽
代碼實現
HTML代碼
首先我們用SVG的Path路徑繪制了一個愛心按鈕：
<svg height="320" width="320" class="like" onclick="document.body.classList.toggle('liked')"> <path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90" fill="white"> <!-- 80 by 70 --> </svg>
同時定義了onclick事件，當點擊這個愛心按鈕時，CSS類將會在like和liked之間切換。
就下來就是定義愛心按鈕點擊后周圍出現的元素，主要是一些五彩的小圓點和一些不同風格顏色的SVG小愛心，代碼如下：
<div class="dot dot-1"></div> <div class="dot dot-2"></div> <div class="dot dot-3"></div> <div class="dot dot-4"></div> <div class="dot dot-5"></div> <div class="dot dot-6"></div> <div class="dot dot-7"></div> <div class="dot dot-8"></div> <svg height="40" width="40" viewBox="0 0 320 320" class="h h-1"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg> <svg height="40" width="40" viewBox="0 0 320 320" class="h h-2"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg> <svg height="40" width="40" viewBox="0 0 320 320" class="h h-3"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg> <svg height="40" width="40" viewBox="0 0 320 320" class="h h-4"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg> <svg height="40" width="40" viewBox="0 0 320 320" class="h h-5"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg> <svg height="40" width="40" viewBox="0 0 320 320" class="h h-6"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg> <svg height="40" width="40" viewBox="0 0 320 320" class="h h-7"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg> <svg height="40" width="40" viewBox="0 0 320 320" class="h h-8"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg> <svg height="110" width="110" viewBox="0 0 320 320" class="fly fly-1"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg> <svg height="110" width="110" viewBox="0 0 320 320" class="fly fly-2"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
到這里為止，我們利用了HTML和SVG將Like愛心按鈕以及點擊后的動畫元素全部繪制了出來。接下來就是添加相應CSS來實現動畫效果了。
CSS代碼
首先是SVG愛心按鈕的CSS代碼，這是點擊前的默認樣式：
svg.like { position: fixed; z-index: 10; top: calc(50vh - 160px); left: calc(50vw - 160px); border-radius: 100%; -webkit-transform: scale(0.3); transform: scale(0.3); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; box-shadow: 0 0 250px rgba(0, 0, 0, 0.4); background: #212121; cursor: pointer; }
然后點擊按鈕后，CSS類將會切換到liked，這時候按鈕將會閃動一下，同時周圍將會飛入許多五彩的小圓點和小愛心。閃動動畫的代碼如下：
body.liked svg.like { -webkit-animation: blink 1s forwards; animation: blink 1s forwards; } @-webkit-keyframes blink { 10% { -webkit-transform: scale(0.42); transform: scale(0.42); background: #8815b7; } 100% { background: #e01f4f; } } @keyframes blink { 10% { -webkit-transform: scale(0.42); transform: scale(0.42); background: #8815b7; } 100% { background: #e01f4f; } }
小圓點和小愛心飛入的動畫代碼如下：
body.liked svg.fly.fly-1 { -webkit-animation: fly-1 1s 0.1s; animation: fly-1 1s 0.1s; } body.liked svg.fly.fly-2 { -webkit-animation: fly-2 1s 0.1s; animation: fly-2 1s 0.1s; } @-webkit-keyframes fly-1 { 25% { margin: -100px 0 0 100px; } 75% { margin: 100px 0 0 -100px; z-index: 5; } 100% { z-index: 11; } } @keyframes fly-1 { 25% { margin: -100px 0 0 100px; } 75% { margin: 100px 0 0 -100px; z-index: 5; } 100% { z-index: 11; } } @-webkit-keyframes fly-2 { 25% { margin: -100px 0 0 -100px; } 75% { margin: 100px 0 0 100px; z-index: 5; } 100% { z-index: 11; } } @keyframes fly-2 { 25% { margin: -100px 0 0 -100px; } 75% { margin: 100px 0 0 100px; z-index: 5; } 100% { z-index: 11; } }
最后我們把五彩小圓點和小愛心的CSS代碼也貼出來：
div.dot { width: 12px; height: 12px; background: white; position: fixed; z-index: 9; border-radius: 100%; top: calc(50vh - 6px); left: calc(50vw - 6px); } div.dot:before { content: ""; width: 8px; height: 8px; border-radius: 100%; top: -20px; left: 2px; position: absolute; background: white; } div.dot:after { content: ""; width: 11px; height: 11px; border-radius: 100%; top: -160px; left: 2px; position: absolute; background: white; display: none; } body.liked div.dot { opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px); background: #00e5ff; transition: opacity 0.5s 1s, background 0.1s 0.2s, -webkit-transform 1s; transition: transform 1s, opacity 0.5s 1s, background 0.1s 0.2s; transition: transform 1s, opacity 0.5s 1s, background 0.1s 0.2s, -webkit-transform 1s; } body.liked div.dot:after { display: block; } body.liked div.dot.dot-2 { -webkit-transform: rotate(45deg) translateY(-100px); transform: rotate(45deg) translateY(-100px); } body.liked div.dot.dot-3 { -webkit-transform: rotate(90deg) translateY(-100px); transform: rotate(90deg) translateY(-100px); } body.liked div.dot.dot-4 { -webkit-transform: rotate(135deg) translateY(-100px); transform: rotate(135deg) translateY(-100px); } body.liked div.dot.dot-5 { -webkit-transform: rotate(180deg) translateY(-100px); transform: rotate(180deg) translateY(-100px); } body.liked div.dot.dot-6 { -webkit-transform: rotate(225deg) translateY(-100px); transform: rotate(225deg) translateY(-100px); } body.liked div.dot.dot-7 { -webkit-transform: rotate(270deg) translateY(-100px); transform: rotate(270deg) translateY(-100px); } body.liked div.dot.dot-8 { -webkit-transform: rotate(305deg) translateY(-100px); transform: rotate(305deg) translateY(-100px); }
到這里，整個Like愛心按鈕動畫就完成了。文章最后也將源碼獻給大家。
源碼下載
完整的代碼我已經整理出了一個源碼包，供大家下載學習。
代碼僅供參考和學習，請不要用於商業用途。
最后總結
這個SVG和CSS實現的Like按鈕非常有創意，很適合在一些商品展示平台上使用。另外，對於like后出現的五彩小圓點和小愛心，大家也可以發揮自己的想象，修改或者添加別的元素，因為SVG非常靈活，可以輕松繪制任何你喜歡的形狀。