だから、私はリップルをクリックするところに表示しようとしていますが、パディングを残したピクセルの量に関係なく、右側に配置するようです。なぜ誰が知っていますか?絶対配置は上の埋め込みを無視しますが、埋め込みを残さないのはなぜですか?
また、誰もが彼らはもはや使用されていない一度:)
var links = document.getElementsByTagName('button');
function ripple(e) {
\t var rpl = document.createElement('div');
this.appendChild(rpl);
var d = Math.max(this.clientWidth, this.clientHeight);
rpl.style.width = rpl.style.height = d+"px";
pl = window.getComputedStyle(this, null).getPropertyValue('padding-left');
rpl.style.left = e.clientX - this.offsetLeft - d/2 + "px";
rpl.style.top = e.clientY - this.offsetTop - d/2 + "px";
rpl.classList.add('ripple');
}
Array.prototype.forEach.call(links, function(b){
\t b.addEventListener('click',ripple);
});
/*custom fonts - Bitter, Montserrat*/
@import url('http://fonts.googleapis.com/css?family=Montserrat|Bitter');
/*basic reset*/
* {margin: 0; padding: 0;font-family: arial; box-sizing: border-box}
body {
\t background: #212121;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
h1 {
\t text-align: center; padding: 85px 100px;
color: whitesmoke;
width: 100%;
margin: 20px;
}
.green {background: limegreen; border: 3px solid limegreen;}
.blue {background: dodgerblue; border: 3px solid dodgerblue;}
.orange {background: orange; border: 3px solid orange;}
button {
min-width: 100px;
margin: 1%;
position: relative;
user-text-select: none;
border-radius: 4px;
font-family: arial;
font-size: 18px;
cursor: pointer;
outline: none;
color: #212121;
overflow: hidden;
padding: 18px 30px;
}
.ripple {
position: absolute;
background: #f5f5f5;
height: 50px;
width: 50px;
border-radius: 50%;
opacity: 0.5;
z-index: 3;
transform: scale(0); opacity: 0.9;
animation: ripple 3s linear;
}
@keyframes ripple {
to {transform: scale(2.5); opacity: 0;}
}
<h1>Ripple Click Effect</h1>
<button class="green">Log in</button>
<button class="blue">Sign up</button>
<button class="orange">Subscribe to newsletter</button>