Python微信訂餐小程序課程視頻

https://blog.csdn.net/m0_56069948/article/details/122285951

Python實戰量化交易理財系統

https://blog.csdn.net/m0_56069948/article/details/122285941
在現代網頁中，我們經常可以在一些文章、視頻和圖片頁面上找到”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"> 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愛心按鈕動畫就完成了。文章最后也將源碼獻給大家。

源碼下載

完整的代碼我已經整理出了一個源碼包，供大家下載學習。

源碼下載鏈接：?https://mp.weixin.qq.com/s/rJK07Dr63KpJZ1xfCSKHBg

代碼僅供參考和學習，請不要用于商業用途。

最后總結

這個SVG和CSS實現的Like按鈕非常有創意，很適合在一些商品展示平臺上使用。另外，對于like后出現的五彩小圓點和小愛心，大家也可以發揮自己的想象，修改或者添加別的元素，因為SVG非常靈活，可以輕松繪制任何你喜歡的形狀。

總結

以上是生活随笔為你收集整理的SVG 和 CSS3 实现一个超酷爱心 Like 按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。