Question

我正在尝试制作一个通常为角落的偏心圆菜单，当您将鼠标悬停在其上方时，它会扩展为完整页面菜单。

这里有一个投资组合具有类似的机制，只是为了清楚起见：https://adrienlaurent.fr/

我最大的问题是我不知道该如何处理Google，因为“ HTML展开圆圈变成菜单”无法正常工作。

我可以补偿圆并使其填充页面。但是，这看起来很糟糕。即使具有transition属性，它仍然跳动。我主要使用CSS动画，但也在jQuery中尝试了一些操作。

body {
      display: flex;
      height: 100vh;
    }
    
    .circle {
      background: orange;
      height: 300px;
      width: 300px;
      border-radius: 50%;
      position: fixed;
      top: 80vh;
      left: -2vw;
      transition: height 2s;
      transition: width 2s;
      transition: top 2s;
      transition: left 2s;
     
    }
    
    .circle:hover {
    	height: 200vh;
    	width: 200vw;
    	top: -30vh;
    	left: -30vw;
    }

    
    <body>
    <div class="circle"></div>
    </body>

同样，任何建议使过渡过程更加平滑也很奇妙。

Answer 1

这是我会尝试的：

body {
  display: flex;
  height: 100vh;
}

.circle {
  background: orange;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  position: fixed;
  top: 80vh;
  left: -2vw;
  transition-duration: 2s;
  transform: scale(1);
}

ul {
  opacity: 0;
  position: relative;
  z-index: 1;
  transition: all .5s .5s;
}

li {
  color: white;
    list-style-type: none;
}

.menu:hover .circle {
  transform: scale(20);
  top: -30vh;
  left: -30vw;
  transition-duration: 2s;
}

.menu:hover ul {
  opacity: 1;
  transition: all .5s .5s;
  }

<body>
  <div class="menu">
    <div class="circle"></div>
    <ul>
      <li>About</li>
      <li>Another menu link</li>
      <li>One more!</li>
    </ul>
  </div>
</body>

我在两个菜单版本中都添加了transition-duration，因此过渡过程双向有效。我将transform:scale的宽度和高度改为100vw / 100vh，以使圆保持完美的圆形。但是，如果要使用此方法，则不应将菜单列表之类的任何其他元素放在同一个元素中，因为文本也将变形并变得很大。

Answer 2

而不是设置宽度，高度，顶部或左侧的动画，请尝试查看transform（性能更好，可以设置transform-origin）。我不知道这是否是您想要的，但它应该使您朝正确的方向

body {
  display: flex;
  height: 100vh;
}

.circle {
  background: orange;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  position: fixed;
  top: 80vh;
  left: -2vw;
 transition: all .2s ease-out;
  transform-origin: 0 100%;
}

.circle:hover {
    transform: translateX(-50%) scale(2);
  
}

<body>
<div class="circle"></div>
</body>

如何绕圈覆盖页面并成为菜单

2 个答案: