3D RotateText 悬停菜单（gsap）
3D RotateText 悬停菜单（gsap）
3D RotateText Hover menu(gsap) 免费下载 在 HTML、CSS 和 JavaScript 中
HTML：
<ul class="menu">
<li class="js-menu-item menu-item">
<a>
<div class="menu-item__text">最佳</div>
</a>
</li> <li class="js-menu-item menu-item">
<a>
<div class="menu-item__text">关于</div>
</a>
</li> <li class="js-menu-item menu-item">
<a>
<div class="menu-item__text">作品</div>
</a>
</li> <li class="js-menu-item menu-item">
<a>
<div class="menu-item__text">事件</div>
</a>
</li> <li class="js-menu-item menu-item">
<a>
<div class="menu-item__text">接触</div>
</a>
</li>
</ul>
您可能还想下载： HTML、CSS 和 JavaScript 中的动画导航栏图标
CSS：
@import url("https://fonts.googleapis.com/css2?family=Oranienbaum&display=swap");
* {
边距：0；
填充：0；
box-sizing：边框框；
文字装饰：无；
} 身体 {
背景颜色：#222；
宽度：100%；
高度：100vh；
显示：弯曲；
对齐项目：居中；
证明内容：中心；
} 。菜单 {
显示：弯曲；
justify-content: 之间的空格；
宽度：100%；
最大宽度：700px；
边距：0 自动；
} .菜单项{
列表样式：无；
} .menu-item > a {
文本转换：大写；
光标：指针；
溢出：隐藏；
显示：块；
颜色：#fff;
} .menu-item__text > 跨度 {
显示：内联块；
字体大小：2.25rem；
字体系列：“Oranienbaum”，衬线；
}
JavaScript：
常量 createElm = 函数（菜单项）{
让 menuItemsTexts = menuItem.children[0].children[0]; 常量 menuItemsTextsArray = [...menuItemsTexts.textContent]; menuItemsTexts.textContent = ""; 常量 textsArray = []; menuItemsTextsArray.forEach((menuItemText) => {
textsArray.push(` <span>${menuItemText}</span> `);
}); textsArray.forEach((textArray) => {
menuItemsTexts.innerHTML += textArray;
}); 常量 parentElm = menuItemsTexts.parentElement; 常量 parentElmHeight = parentElm.clientHeight;
parentElm.style.height = `${parentElmHeight}px`; 常量 cloneItem = menuItemsTexts.cloneNode(true);
parentElm.appendChild(cloneItem);
}; 常量动画=函数（菜单项）{
gsap.defaults({
轻松：“power1”，
错开：{
数量：0.14，
来自：“开始”，
},
});
menuItem.addEventListener("鼠标悬停", function () {
gsap.to(this.children[0].children[0].children, {
y: "-100%",
});
gsap.to(this.children[0].children[1].children, {
y: "-100%",
});
}); menuItem.addEventListener("mouseleave", function () {
gsap.to(this.children[0].children[0].children, {
y：“0”，
});
gsap.to(this.children[0].children[1].children, {
y：“0”，
});
});
}; const targetItems = document.querySelectorAll(".js-menu-item"); targetItems.forEach((targetItem) => {
常量菜单项 = 目标项；
创建榆树（菜单项）；
动画（菜单项）；
});
HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com
完毕！享受 3D RotateText 悬停菜单（gsap）片段
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
