jquery - 在更大的视口(viewport)上使用 css3 动画像素化扩展圆圈

Question

我有从 10 像素半径开始并扩展到 100% 的圆圈。圆圈出现在整个视口(viewport)的随机位置。动画在移动设备上看起来不错，但在较大的视口(viewport)上像素化。

这是动画:https://rimildeyjsr.github.io/spotify-circle-animation/

关于如何使所有视口(viewport)中的圆保持一致有什么想法吗？

jQuery

 var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        function makeDiv(colorChoice){
            var divsize = 10;
            var color = colorChoice;
            console.log(color);
            $newdiv = $('<div/>').css({
                'width':divsize+'px',
                'height':divsize+'px',
                'background-color': color
            });

            var posx = (Math.random() * ($(document).width())).toFixed();
            var posy = (Math.random() * ($(document).height())).toFixed();
            $newdiv.css({
                'position':'absolute',
                'left':posx+'px',
                'top':posy+'px',
                'border-radius':'50%',
                'display':'none'
            }).appendTo( 'body' ).addClass('animate').css({'display':'block'}).one(animationEnd,function(){
                $(this).remove();
            });
        };
        var id = setInterval(function(){makeDiv('black')},5000);

CSS

html,body {
    padding : 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

div {
    height: 10px;
    width:10px;
    background-color: black;
    border-radius: 50%;
    top: 250px;
    right: 10px;
    left: 800px;
}

.animate {
    -webkit-animation: expand 60s;
}

@-webkit-keyframes expand {
    0%{
        -webkit-transform: scale(0,0);
    }

    100%{
        -webkit-transform: scale(100.0,100.0);
        display: none;
    }
}

Answer 1

像素化边缘是由 transform: scale 引起的。它将默认为 10 x 10 像素的圆拉伸(stretch)到其大小的 100 倍。

您需要考虑使默认大小尽可能大，然后在开始时将其缩小。

链接到更新的 fiddle :

https://jsfiddle.net/Lreux3rx/2