Question

我的圆圈出现在视口上的随机位置并展开，直到它们填满整个屏幕。动画在桌面上是完美的，但会导致屏幕在移动和口吃时调整大小，以适应不断扩大的圈子。如果需要，我希望圆圈从视口中展开。

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

我尝试删除overflow-x : hidden;和overflow-y : hidden;，但这会导致视口断断续续。

非常感谢任何帮助。

Jquery的：

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

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

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

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

1 个答案: