3
divの幅と高さを増やして一定の時間内に内側の円がそのサイズを増やして外側の円を埋めるようにしようとしています。私はすべてを行うことができますが、ポジションは少し問題を引き起こしています。内円の寸法が中心位置を失い、右下に向かって増加するにつれて、どのようにして幅と高さを増やし続けることができますか？中心に置いておくと、完成したら外側の円を完全に埋めることができます。多くのおかげでJavascriptで中心位置を保持しながら要素の幅と高さを一時的に増やす
var outer, inner, width, interval, height;
inner = document.querySelector(".inner");
width = 0;
height = 0;
window.addEventListener("load", function() {
interval = setInterval(function() {
if (width >= 200 && height >= 200) {
inner.textContent = "100% Completed";
clearInterval(interval);
}
else {
width += 3.333;
height += 3.333;
inner.style.width = width + "px";
inner.style.height = height + "px";
}
}, 1000);
});.outer {
width: 200px;
height: 200px;
border: 5px solid tomato;
border-radius: 50%;
margin: 100px auto;
position: relative;
}
.inner {
width: 0;
height: 0;
background-color: tomato;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
おかげで、親指D-マネー – knight