时间戳

首页 > 解决方案 > 不缩放元素边框

javascript - 不缩放元素边框

问题描述

我正在使用关键帧动画来增加透明的 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>

标签： javascripthtmlcsscss-animationskeyframe

解决方案

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

$(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>

推荐阅读