Question

我的圆圈从半径10px开始并扩展到100％。圆圈出现在整个视口的随机位置。动画在移动设备上看起来很好，但在较大的视口上却是像素化的。

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

如何保持所有视口中的圆圈一致？

的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像素）拉伸到100倍的大小。

您希望将默认大小设置为尽可能大，然后在开始时将其缩小。

链接到更新的小提琴：

https://jsfiddle.net/Lreux3rx/2

在较大的视口上使用css3动画像素化扩展圆圈

1 个答案: