1.点击波纹扩散
效果：
波纹扩散
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
width: 100vw;
height: 100vh;
}
.dot{
width: 20px;
height: 20px;
background: transparent;
border-radius: 100%;
position: absolute;
animation: sploosh 5s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 999;
}
@keyframes sploosh{
0%{
box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
background: rgba(66, 166, 223, 0.7);
}
100%{
box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);
background: rgba(66, 166, 223, 0);
}
}
</style>
</head>
<body>
<script>
window.onload = function() {
// document.querySelector('body').addEventListener('click', function(e) {
// var dotDom = document.createElement('div');
// dotDom.className = 'dot';
// dotDom.style.top = e.pageY + 'px';
// dotDom.style.left = e.pageX + 'px';
// document.querySelector('body').appendChild(dotDom);
// setTimeout(function() {
// dotDom.remove()
// }, 5000)
// })
document.querySelector('body').onclick = function(e) {
var dotDom = document.createElement('div');
dotDom.className = 'dot';
dotDom.style.top = e.pageY + 'px';
dotDom.style.left = e.pageX + 'px';
document.querySelector('body').appendChild(dotDom);
setTimeout(function() {
dotDom.remove()
}, 5000)
}
}
</script>
</body>
</html>
按钮内的波纹扩散：
效果：
按钮内的波纹扩散
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.waves-ripple{
position: absolute;
user-select: none;
opacity: 1;
transform: scale(0);
transform-origin: center;
display: block;
border-radius: 100%;
}
.waves-ripple.click-active{
opacity: 0;
transform: scale(2);
transition: opacity 1.2s ease-out, transform 0.6s ease-out;
}
.btn{
width: 200px;
height: 100px;
border-radius: 24px;
user-select: none;
line-height: 100px;
text-align: center;
background:cyan;
color: #fff;
overflow: hidden;
}
</style>
</head>
<body>
<div id="app">
<div class="btn" v-waves>按钮</div>
</div>
<script>
// 重点在于如何计算到点击的坐标距离容器的上下距离
var vm = new Vue({
el: '#app',
directives: {
waves: {
bind(el, binding) {
el.addEventListener('click', e => {
if (!el.style.position) {
el.style.position = 'relative';
}
el.style.overflow = 'hidden';
let wavesDom = el.querySelector('.waves-ripple');
let rect = el.getBoundingClientRect();
if (wavesDom) {
wavesDom.className = 'waves-ripple'
} else {
wavesDom = document.createElement('div');
wavesDom.className = 'waves-ripple';
el.appendChild(wavesDom);
}
let m = Math.max(el.offsetHeight, el.offsetWidth);
wavesDom.style.width = wavesDom.style.height = m + 'px';
wavesDom.style.backgroundColor = 'rgba(0,0,0,0.15)';
wavesDom.className = 'waves-ripple click-active'
wavesDom.style.top = (e.pageY - rect.top -m/2) + 'px';
wavesDom.style.left = (e.pageX - rect.left - m/2) + 'px';
})
}
}
}
})
</script>
</body>
</html>
网友评论