jquery - 扩大圆圈导致移动屏幕调整大小

Question

我在视口(viewport)上的随机位置出现了圆圈，并不断扩大直到填满整个屏幕。动画在桌面上是完美的，但会导致屏幕在移动设备上调整大小并出现卡顿，以适应不断扩大的圆圈。如果需要，我希望圆圈扩展到视口(viewport)之外。

动画链接:https://rimildeyjsr.github.io/spotify-circle-animation/

我尝试删除 overflow-x : hidden; 和 overflow-y : hidden; 但这会导致视口(viewport)卡顿。

非常感谢任何帮助。

J查询:

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

            var posx = (Math.random() * ($(document).width()) - (divsize / 2)).toFixed();
            var posy = (Math.random() * ($(document).height()) - (divsize / 2)).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')},3000);

CSS:

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

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

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

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

Answer 1

请尝试添加视口(viewport)元标记(以使布局响应)并删除 div 的 1000px 宽度。

<meta name="viewport" content="width=device-width, initial-scale=1">