本篇文章給大家?guī)淼膬?nèi)容是關(guān)于純css實現(xiàn)Material Design水滴動畫按鈕效果的js實現(xiàn)方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
在上一篇，我們已經(jīng)實現(xiàn)了用純css實現(xiàn)水滴擴(kuò)散動畫，但是有一些瑕疵，文章結(jié)尾處也提到過，一是頁面加載進(jìn)來就會看到按鈕上的水滴動畫運動一次，二是點擊的時候不能根據(jù)鼠標(biāo)的位置來擴(kuò)散，今天我們來解決這個問題。
以下所有基礎(chǔ)代碼均來自上一篇
css中只能做到固定的點擴(kuò)散
無法避免的js
雖然我很想通過css來實現(xiàn)想要的效果，畢竟屬于UI交互方面，盡量別扯上js，無奈后勁不足，很多功能確實無法實現(xiàn)，比如獲取鼠標(biāo)位置，這個css就真沒轍了。
思考了很久，還是只能通過js來獲取位置坐標(biāo)了，但是我們可以減少js的邏輯，我們只需要知道坐標(biāo)即可，剩下的給css來做就好了。
實現(xiàn)思路
css新特性
其實用的css很多新特性的話，很多以前只能通過js來實現(xiàn)的css也可以代替了。
css原生變量var，大家平時應(yīng)該都接觸過了吧。可能平時由于兼容性的問題，用起來縮手縮腳，干脆為了兼容性就不用了
其實只要不考慮IE的話兼容性還是可以的，就算要兼顧IE，可以保證按鈕是完好的，只是沒有動畫效果不就可以了嗎，這也是所謂的優(yōu)雅降級吧
var的用法很簡單
:root?{
????--main-bg-color:?red;
}
.container?{
????width:?20px;
????height:?20px;
????background-color:?var(--main-bg-color);/**background-color:red**/
}
有關(guān)var的詳細(xì)用法，大家可以自行百度
全能js
我們用js只有一個目的，就是獲取鼠標(biāo)點擊的位置
很簡單，事件對象event中有個offsetX和offsetY就是用來描述鼠標(biāo)位置相對于父元素的位置
其實這個屬性早些年是IE私有的，谷歌和火狐看著好用，不知道從上面版本也都支持了，所以兼容性沒太大問題~
var?x?=?event.offsetX; var?y?=?event.offsetY;
具體實現(xiàn)
我們需要在點擊的時候獲取到左邊，然后存在css變量中
示例代碼
function?ripple(ev){
??var?x?=?ev.offsetX;
??var?y?=?ev.offsetY;
??this.style.setProperty('--x',x+'px');
??this.style.setProperty('--y',y+'px');
}
沒錯，就這么一丁點js
相應(yīng)的css部分我們要拿到我們保存的變量，來改變中心點的位置
.btn>span:after{?
??content:?'';?
??position:?absolute;?
??background:?transparent;?
??border-radius:50%;?
??width:?100%;?
??padding-top:?100%;?
??margin-left:?-50%;?
??margin-top:?-50%;?
??left:?var(--x,-100%);?
??top:?var(--y,-100%);?
}
這里我們解決了兩個問題，
首次進(jìn)來會觸發(fā)一次：這里我們把left給了一個默認(rèn)值-100%
left:?var(--x,-100%);
也就是說，當(dāng)前面的--x沒有值或者非法的時候就會取后面一個值，-100%會讓水滴動畫的過程在視線之外觸發(fā)，頁面上根本看不見。
跟隨鼠標(biāo)點擊的位置擴(kuò)散：現(xiàn)在已經(jīng)獲取到了鼠標(biāo)的位置，所以就很容易實現(xiàn)了鼠標(biāo)在哪點擊就從哪里擴(kuò)散的問題
完整demo
<label class="btn" tabindex="1"> <input type="checkbox"><span onclick="ripple(this,event)">button</span> </label>
.btn{
display: block;
width: 300px;
margin: 50px;
outline: 0;
overflow: hidden;
position: relative;
transition: .3s;
cursor: pointer;
user-select: none;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 50px;
background: tomato;
color: #fff;
border-radius:
10px;
}
.btn>span{
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100%;
}
.btn>span:after{
content: '';
position: absolute;
background: transparent;
border-radius:50%;
width: 100%;
padding-top: 100%;
margin-left: -50%;
margin-top: -50%;
left: var(--x,-100%);
top: var(--y,-100%);
}
.btn:active{
background: orangered;
}
.btn>input[type=checkbox]{display: none}
.btn>input[type=checkbox]+span:after{animation: ripple-in 1s;}
.btn>input[type=checkbox]:checked+span:after{animation: ripple-out 1s;}
@keyframes ripple-in{
from {
transform: scale(0);
background: rgba(0,0,0,.25)
}
to {
transform: scale(1.5);
background: transparent
}
}
@keyframes ripple-out{
from {
transform: scale(0);
background: rgba(0,0,0,.25)
}
to {
transform: scale(1.5);
background: transparent
}
}function ripple(dom,ev){
console.log(ev)
var x = ev.offsetX;
var y = ev.offsetY;
dom.style.setProperty('--x',x+'px');
dom.style.setProperty('--y',y+'px');
}小節(jié)
其實js實現(xiàn)是很簡單的，css才是難點，css遠(yuǎn)比js靈活的多。比方說積木，積木的各種小零件是固定的，種類也有限，但是你可以組合出各種不同的玩具出來，可以稱之為頭腦創(chuàng)意吧，然而你組合出來一輛小汽車，卻沒法自動行駛，那么你就需要用上電機(jī)模組了，這是功能驅(qū)動。實際上在研發(fā)積木的過程中才是最耗費心思的地方，那些動力系統(tǒng)才是一層不變的。
Atas ialah kandungan terperinci 純css實現(xiàn)Material Design水滴動畫按鈕效果的js實現(xiàn)方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Bagaimana cara menukar warna teks dalam CSS?
Jul 27, 2025 am 04:25 AM
Untuk menukar warna teks dalam CSS, anda perlu menggunakan atribut warna; 1. Gunakan atribut warna untuk menetapkan warna latar depan teks, nama warna yang menyokong (seperti merah), kod heksadesimal (seperti #FF0000), nilai RGB (seperti RGB (255,0,0)), nilai HSL (0,100% RGBA (255,0,0,0.5)); 2. Anda boleh memohon warna ke mana -mana elemen yang mengandungi teks, seperti tajuk H1 hingga H6, perenggan P, pautan A (perhatikan tetapan warna dari keadaan yang berlainan: pautan, a: dilawati, A: hover, a: aktif), butang, div, span, dan sebagainya; 3. Kebanyakan
Bagaimana untuk membersihkan CSS yang tidak digunakan?
Jul 27, 2025 am 02:47 AM
UseAutomatedToolsLikePurgecssoruncsStoScanandRemoveUnusedCss; 2.integratePurgingIntoyourBuildProcessviawebpack, Vite, OrtailWind 'Scontentconfiguration; 3.auditcssusageWithchromedevtoolscoveragetabbeforepurgingtoavoidremovingneededstyles; 4.safelistdynamic
Terangkan unit CSS yang berbeza dan bila menggunakannya
Jul 27, 2025 am 04:24 AM
Dalam pembangunan web, pilihan unit CSS bergantung kepada keperluan reka bentuk dan prestasi responsif. 1. Piksel (PX) digunakan untuk menetapkan saiz seperti sempadan dan ikon, tetapi tidak kondusif untuk reka bentuk responsif; 2. Peratusan (%) diselaraskan mengikut bekas induk, sesuai untuk susun atur streaming tetapi perhatian terhadap ketergantungan konteks; 3.EM didasarkan pada saiz fon semasa, REM berdasarkan fon elemen akar, sesuai untuk fon elastik dan kawalan tema bersatu; 4. Unit Viewport (VW/VH/VMIN/VMAX) diselaraskan mengikut saiz skrin, sesuai untuk elemen skrin penuh dan UI dinamik; 5. Auto, mewarisi, nilai awal dan lain -lain digunakan untuk mengira, mewarisi atau menetapkan semula gaya secara automatik, yang membantu pengurusan susun atur dan gaya yang fleksibel. Penggunaan rasional unit -unit ini dapat meningkatkan fleksibiliti dan responsif halaman.
Apakah konteks penyusunan?
Jul 27, 2025 am 03:55 AM
Astackingcontextiself-containedlayerincthattontrolsthez-orderofoverlappappingelements, whaneNestedContextSrestrictz-indexinteractions; itiscreatedbypropertiesez-indexonpositionedelements, kelegapan
Bagaimana cara menggunakan harta penapis latar belakang CSS?
Aug 02, 2025 pm 12:11 PM
Filter latar belakang digunakan untuk menggunakan kesan visual kepada kandungan di belakang unsur-unsur. 1. Gunakan penapis latar belakang: blur (10px) dan sintaks lain untuk mencapai kesan kaca beku; 2. Menyokong pelbagai fungsi penapis seperti kabur, kecerahan, kontras, dan lain -lain dan boleh ditumpangkan; 3. Ia sering digunakan dalam reka bentuk kad kaca, dan perlu memastikan bahawa unsur -unsur bertindih dengan latar belakang; 4. Pelayar moden mempunyai sokongan yang baik, dan @supports boleh digunakan untuk menyediakan penyelesaian penurunan; 5. Elakkan nilai kabur yang berlebihan dan kerap meredakan untuk mengoptimumkan prestasi. Atribut ini hanya berkuatkuasa apabila terdapat kandungan di belakang unsur -unsur.
Bagaimana cara gaya pautan dalam CSS?
Jul 29, 2025 am 04:25 AM
Gaya pautan harus membezakan negara-negara yang berbeza melalui kelas pseudo. 1. Gunakan A: Pautan Untuk menetapkan gaya pautan yang tidak dicapai, 2. A: Dikunjungi untuk menetapkan pautan yang diakses, 3. Anda boleh meningkatkan kebolehgunaan dan kebolehcapaian dengan menambahkan padding, kursor: penunjuk dan mengekalkan atau menyesuaikan garis besar fokus. Anda juga boleh menggunakan sempadan bawah atau animasi untuk memastikan bahawa pautan mempunyai pengalaman pengguna yang baik dan aksesibiliti di semua negeri.
Bagaimana cara memusatkan teks dalam CSS?
Jul 27, 2025 am 03:16 AM
Gunakan Teks-Align: Pusat untuk mencapai pusat teks mendatar; 2. Gunakan ITEM Align-item Flexbox: Pusat dan Justify-Content: Pusat untuk mencapai pusat menegak dan mendatar; 3. Teks satu baris boleh dipusatkan secara menegak dengan menetapkan ketinggian garis yang sama dengan ketinggian kontena; 4. Unsur kedudukan mutlak boleh digabungkan dengan atas: 50%, kiri: 50%dan transform: Terjemahan (-50%, -50%) untuk mencapai pusat; 5. ITEM PLACE CSSGRID: Pusat juga boleh mencapai pusat dua paksi pada masa yang sama. Adalah disyorkan untuk menggunakan Flexbox atau Grid terlebih dahulu dalam susun atur moden.
Apakah stylesheet ejen pengguna?
Jul 31, 2025 am 10:35 AM
Stylesheet ejen pengguna adalah gaya CSS lalai yang melayari secara automatik untuk memastikan bahawa unsur -unsur HTML yang belum menambah gaya tersuai masih boleh dibaca asas. Mereka mempengaruhi penampilan awal halaman, tetapi terdapat perbezaan antara pelayar, yang mungkin membawa kepada paparan yang tidak konsisten. Pemaju sering menyelesaikan masalah ini dengan menetapkan semula atau menyeragamkan gaya. Gunakan panel pengiraan atau gaya alat pemaju untuk melihat gaya lalai. Operasi liputan biasa termasuk membersihkan margin dalaman dan luaran, mengubah suai garis bawah pautan, menyesuaikan saiz tajuk dan menyatukan gaya butang. Memahami gaya ejen pengguna boleh membantu meningkatkan konsistensi penyemak imbas dan membolehkan kawalan susun atur yang tepat.
