响应随机圆网格

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>来表示这种重力效应。