关于cuberto网站菜单的动画

Question

有没有哪位知道这个网站的菜单的一系列动画怎么写啊
https://hello.cuberto.com/

Answer 1

以下内容部分参考ChatGPT模型：

---

这个网站的菜单动画是基于CSS3的动画实现的。具体的动画效果可以通过查看网站的源代码来获取。其中使用了transform、transition、animation等属性来实现不同的效果。例如，点击菜单按钮时，菜单项会以扇形的动画展开，可以通过transform: rotate()和transition属性来实现。同时，菜单项的颜色渐变效果可以通过CSS的linear-gradient属性来实现。以下是一个简单的实现示例：

HTML代码：

<div class="menu">
  <button class="menu-toggle"></button>
  <ul class="menu-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

CSS代码：

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
  z-index: 1000;
}

.menu-toggle {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.menu-toggle:before,
.menu-toggle:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 50%;
  transition: transform 0.3s ease-out;
}

.menu-toggle:before {
  transform: translateX(8px);
}

.menu-toggle:after {
  transform: translateX(-8px);
}

.menu-list {
  position: absolute;
  top: 60px;
  right: -200px;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 50%;
  list-style: none;
  padding: 0;
  margin: 0;
  transform: rotate(0deg);
  transition: transform 0.3s ease-out;
}

.menu-list.open {
  transform: rotate(90deg);
}

.menu-list li {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transition: transform 0.3s ease-out;
}

.menu-list li:nth-child(1) {
  transform: translate(-50%, -50%) rotate(-90deg) translateX(100px);
}

.menu-list li:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-90deg) translateX(70.7px) translateY(-70.7px);
}

.menu-list li:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-90deg) translateY(-100px);
}

.menu-list li:nth-child(4) {
  transform: translate(-50%, -50%) rotate(-90deg) translateX(-70.7px) translateY(-70.7px);
}

.menu-list li a {
  display: block;
  padding: 10px;
  font-size: 18px;
  color: #000;
  text-align: center;
  background-image: linear-gradient(to bottom, #ccc, #fff);
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  transition: background-image 0.3s ease-out;
}

.menu-list li a:hover {
  background-image: linear-gradient(to bottom, #ddd, #fff);
}

JavaScript代码：

var menuToggle = document.querySelector('.menu-toggle');
var menuList = document.querySelector('.menu-list');

menuToggle.addEventListener('click', function() {
  menuList.classList.toggle('open');
});

这里只是实现了菜单展开和收起的基本效果，可以根据自己的需求进行进一步的优化和改进。

---

如果我的建议对您有帮助、请点击采纳、祝您生活愉快