css-點選按鈕實現水滴動畫
阿新 • • 發佈：2019-02-08
平常在使用APP的時候，當用戶點選某個按鈕的時候，按鈕會出現水滴的效果，原生APP開發的時候，會提供相關的動畫，如果在PC端或者H5的時候想實現這個效果，也可以找一些相關的庫來進行開發，但是為了某一個小小的互動而引入外部的JS和CSS，始終感覺不划算，自己如果用css+js來進行開發，可能體驗和開發會更加方便。
一、CSS
<style> .btn { display: block; width: 300px; height: 100px; line-height: 100px; outline: 0; overflow: hidden; position: relative; transition: .3s; text-align: center; cursor: pointer; user-select: none; 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: ''; background: transparent; border-radius: 50%; width: 100%; padding-top: 100%; position: absolute; margin-left: -50%; margin-top: -50%; left: var(--x, -100%); top: var(--y, -100%); } .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 { 0% { transform: scale(0); background: rgba(0, 0, 0, .25) } 100% { transform: scale(1.5); background: transparent } } @keyframes ripple-out { 0% { transform: scale(0); background: rgba(0, 0, 0, .25) } 100% { transform: scale(1.5); background: transparent } } </style> //tip：var()是CSS3提供的函式屬性值修改 //地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/var
二、HTML
<body>
<label class="btn" tabindex="1">
<input type="checkbox">
<span onclick="ripple(this,event)">這是一個可點選區域</span>
</label>
</body>
三、js
//獲取當前使用者點選的位置，然後從當前點選的位置進行放大 <script> function ripple(dom, ev) { var x = ev.offsetX; var y = ev.offsetY; dom.style.setProperty('--x', x + 'px'); dom.style.setProperty('--y', y + 'px'); } </script> //setProperty()用來從新設定一個新的CSS屬性 //地址：http://www.runoob.com/jsref/met-cssstyle-setproperty.html