时间戳

首页 > 解决方案 > 如何长出一个圆圈来覆盖页面并成为菜单

jquery - 如何长出一个圆圈来覆盖页面并成为菜单

问题描述

我正在尝试制作一个偏移圆的菜单，通常在角落，当你将鼠标悬停在它上面时，它会展开成一个整页菜单。

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

我最大的问题是我无法弄清楚谷歌的内容，因为“HTML 扩展圆圈成为菜单”不起作用。

我可以偏移圆圈，我可以让它填满页面。然而，它看起来很可怕。即使有过渡属性，它仍然很跳跃。我主要使用 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>

同样，任何使过渡更顺畅的建议都很棒。

标签： jqueryhtmlcsscss-animations

解决方案

这是我会尝试的：

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 转换而不是宽度和高度，以保持圆圈完美圆润。但是，如果您想使用这种方法，则不应将任何其他元素（如菜单列表）放入同一元素中，因为文本也会被转换并变得非常大。

推荐阅读