旋转导航：轻量级动效，动感十足

前端

2023-12-16 17:57:01

为您的网站注入活力：旋转导航的魅力

在当今竞争激烈的数字环境中，您的网站需要脱颖而出才能吸引观众。旋转导航是一种轻巧且引人注目的动态效果，可以为您的网站增添动感十足的视觉元素。

什么是旋转导航？

旋转导航是一种交互式导航菜单，其链接围绕圆形容器旋转。当您将鼠标悬停在容器上或点击控制复选框时，链接会以动画形式展开或收缩。这种动感的视觉效果营造出一种身临其境的体验，吸引了用户的注意力。

如何构建旋转导航？

创建旋转导航相对简单，只需几个 HTML 和 CSS 步骤：

使用<nav>元素创建一个导航菜单容器。
使用<a>元素包装每个导航链接。
使用<input type="checkbox">元素作为菜单控制。
为导航菜单和链接应用样式，包括颜色、大小和位置。
添加动画效果，如旋转动画。

代码示例

<nav>
  <input type="checkbox" id="menu-toggle">
  <label for="menu-toggle"></label>
  <ul>
    <li><a href="#">链接 1</a></li>
    <li><a href="#">链接 2</a></li>
    <li><a href="#">链接 3</a></li>
  </ul>
</nav>

nav {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #eee;
}

nav ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

nav a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #333;
  text-decoration: none;
  margin: 0 10px;
}

nav a:hover {
  background: #ccc;
}

input[type="checkbox"] {
  position: absolute;
  top: -9999px;
}

label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

nav {
  animation: rotate 2s infinite linear;
}