Question

我正在使用关键帧动画制作越来越透明的1px圆。但是div边框随着宽度和高度的增加而增加。有什么方法可以使边界不增加的圆圈变成圆形？

$(document).on({
    click: function (e) {
        var d = document.createElement('div');
        d.className = 'clickEffect';
        d.style.width = '1px';
        d.style.height = '1px';
        d.style.top = `${e.clientY}px`;
        d.style.left = `${e.clientX}px`;
        document.body.appendChild(d);
        d.addEventListener('animationend', (() => {
            d.parentElement.removeChild(d);
        }).bind(this));
    }
});

div.clickEffect {
    position: fixed;
    border:1px solid #000;
    border-radius: 50%;
    z-index: 99999;
    animation: clickEffect 1s ease-out;
}

@keyframes clickEffect {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
        transform: scale(20);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
</body>
</html>

Answer 1

动画宽度和高度，而不是比例。

$(document).on({
  click: function(e) {
    var d = document.createElement('div');
    d.className = 'clickEffect';
    d.style.width = '1px';
    d.style.height = '1px';
    d.style.top = `${e.clientY}px`;
    d.style.left = `${e.clientX}px`;
    document.body.appendChild(d);
    d.addEventListener('animationend', (() => {
      d.parentElement.removeChild(d);
    }).bind(this));
  }
});

div.clickEffect {
  position: fixed;
  border: 1px solid #000;
  border-radius: 50%;
  z-index: 99999;
  transform: translate(-50%,-50%);
  animation: clickEffect 1s ease-out;
}

@keyframes clickEffect {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
    //transform: scale(20);
    width: 20px;
    height: 20px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Answer 2

您必须设置高度和宽度的动画，而不是缩放比例。

要保持居中，必须平移X和Y

所以代码看起来像这样：

$(document).on({
    click: function (e) {
        var d = document.createElement('div');
        d.className = 'clickEffect';
        d.style.width = '1px';
        d.style.height = '1px';
        d.style.top = `${e.clientY}px`;
        d.style.left = `${e.clientX}px`;
        document.body.appendChild(d);
        d.addEventListener('animationend', (() => {
            d.parentElement.removeChild(d);
        }).bind(this));
    }
});

div.clickEffect {
    position: fixed;
    border:1px solid #000;
    border-radius: 50%;
    z-index: 99999;
    animation: clickEffect 0.5s ease-out;
}

@keyframes clickEffect {
    0% {
        opacity: 1;
    }

    100% {
		opacity: 0.5;
		transform: translateX(-20px) translateY(-20px);
		width: 40px;
		height: 40px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
</body>
</html>

Answer 3

这是另一个依靠平移和透视图来达到保持相同边界的缩放效果的想法

$(document).on({
    click: function (e) {
        var d = document.createElement('div');
        d.className = 'clickEffect';
        d.style.top = `${e.clientY}px`;
        d.style.left = `${e.clientX}px`;
        document.body.appendChild(d);
        d.addEventListener('animationend', (() => {
            d.parentElement.removeChild(d);
        }).bind(this));
    }
});

div.clickEffect {
    position: fixed;
    border-radius: 50%;
    z-index: 99999;
    width:20px;
    height:20px;
    margin:-10px 0 0 -10px;
    border:1px solid #000;
    transform:perspective(200px) translateZ(-250px);
    animation: clickEffect 1s ease-out;
}

@keyframes clickEffect {
    0% {opacity: 1;}
    100% {opacity: 0.5; 
    transform:perspective(200px) translateZ(90px)}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

不缩放元素边框

3 个答案: