Html 如何在页面中展开div块？

我在看Android开发者的网站，我想复制一下当有人在上面悬停时他们是如何设计这篇文章的动画的。因此，我尝试在纯HTML/CSS中制作类似的东西。然而，我遇到了一个问题

我使用float期望div标记彼此分离并应用适当的边距。然而，div标签似乎是堆叠在彼此的顶部，而不是分散

我想让他们看起来像这样

但结果是这样的

我在下面提供了我的文件

HTML

---

谢谢你的帮助

您需要关闭div标记，如so

，然后您可以将这3个div放在flex容器中，并将它们均匀地隔开

希望这有帮助

  <div class="new"><div>
  <div class="new"><div>
  <div class="new"><div>

body {
  background: white;
  font-family:courier;
  padding:20px 100px 20px 100px; 
}

.new {
  width:100px;
  height:100px;
  background-color:white;
   position: relative;
  border:2px solid black;
  float:left;
  padding:15px;
  border-radius:5%;
}

.new::before {
  content:"";
  width:100px;
  height:100px;
   padding:15px;
  background-color:black;
  position:absolute;
  transform:translate(-6px,-6px);
  border-radius:5%;
  z-index: -1;
  
  
}

.new:hover:before{
  animation-name:click;
  animation-duration:500ms;
  animation-fill-mode:forwards;
}



@keyframes click { 
   0% { 
         transform:translate(-6px,-6px);
  
  }
  100% { 
         transform:translate(-10px,-10px);
  
  }
}