javascript - 响应式随机圆网格

Question

我想在 HTML/CSS/JavaScript 中创建以下随机圆形网格(不包括效果)。我不知道该怎么做。我应该使用免责定位来获得这个工作/响应吗？看起来像一个中心点正在拉动圆圈......

从 iTunes 捕获的 GIF

HTML

<div class="circle large">
    Hello
</div>
<div class="circle medium">
    Hello
</div>

CSS

.circle {
    border-radius: 50%;
    text-align: center;
    color: #111;
    margin: 10px;
}

.medium {
    width: 80px;
    height: 80px;
    border: 3px #FC3358 solid;    
    font-size: 14px;
    line-height: 80px;    
}

.large {
    width: 120px;
    height: 120px;
    font-size: 18px;
    line-height: 120px; 
    background: #FC3358;
    color: #fff;
}

输出

Answer 1

您需要使用 <canvas>对于那种重力效应。