我在视口(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;
}
}
最佳答案
请尝试添加视口(viewport)元标记(以使布局响应)并删除 div 的 1000px 宽度。
<meta name="viewport" content="width=device-width, initial-scale=1">
关于jquery - 扩大圆圈导致移动屏幕调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43751157/