點擊漣漪效果
前天看到b站上一個視頻，up主實現了一個按鈕點擊然后以點擊點為圓心出現一個圓，然后這個圓慢慢變大最后消失，感覺很吊的樣子，我覺得我也能實現，廢話不多說，干就完了。
。。。。。。。。。。。。。。。
經過兩分鍾的編寫，終於實現了 （如下圖：點擊了第二個按鈕，然后出現了一個漣漪）
然后上代碼
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>漣漪</title> <link rel="stylesheet" href="../css/base.css" /> <link rel="stylesheet" href="../css/button.css" /> </head> <body> <div id="app"> <ul @click="cel"> <li> <div class="btn-cel" @click="cel"> click </div> </li> <li> <div class="btn-cel red" @click="cel"> click </div> </li> <li> <div class="btn-cel blue" @click="cel"> click </div> </li> </ul> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: "#app", methods: { cel(tag) { let x = tag.offsetX; let y = tag.offsetY; let ripples = document.createElement("span"); ripples.style.left = x + "px"; ripples.style.top = y + "px"; tag.srcElement.appendChild(ripples); setTimeout(() => { ripples.remove(); }, 1000); }, }, }); </script> </html>
base.css:
* { margin: 0; padding: 0; } html,body { height: 100vh; width: 100vw; background-color: #fff; font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; } a { text-decoration: none; } li { list-style: none; } input { outline: none; }
然后是主要的button.css:
#app{ width: 100%; height: 100%; background: linear-gradient(to right,#123456 0%,#abcdef 100%); display: flex; justify-content: center; align-items: center; } ul{ width: 300px; height: 200px; background-color: #fff; padding: 20px; border-radius: 10px; position: relative; overflow: hidden; } li{ margin: 20px; } .btn-cel{ width: 100px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #abcdef; margin: 0 auto; text-transform: uppercase; font-size: 14px; letter-spacing: 2px; border-radius: 6px; cursor: pointer; color: wheat; position: relative; background: linear-gradient(40deg,#755beaff,#ff72c077); overflow: hidden; } .red{background: linear-gradient(90deg,#6e1e22ff,#a3949677);} .blue{background: linear-gradient(90deg,#43129eff,#a8aed477);} span{ position: absolute; display: inline-block; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%,-50%); background-color: #fff000; animation: animate 1s linear infinite; } @keyframes animate{ from{width: 1px;height: 1px;opacity: .5;} to{width: 100px;height: 100px;opacity: .1;} }
然后就OK了 美滋滋
不過：沒有做瀏覽器兼容問題，谷歌瀏覽器是沒問題的
這個小demo還是讓俺復習到了一些知識點的：
1.vue點擊事件怎么獲取到當前元素：tag.srcElement
2.背景漸變：background: linear-gradient(to right,#123456 0%,#abcdef 100%);
3.c3動畫：
animation: animate 1s linear infinite;
@keyframes animate{
from{width: 1px;height: 1px;opacity: .5;}
to{width: 100px;height: 100px;opacity: .1;}
}
over！