悬浮菜单文字裂开导航效果代码
代码语言:html
所属分类:菜单导航
代码描述:悬浮菜单文字裂开导航效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-family: "Gilroy ExtraBold", system-ui, sans-serif; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -webkit-font-kerning: normal; -webkit-text-size-adjust: 100%; } html, body { width: 100vw; height: 100vh; } body { background: linear-gradient(45deg, #02001F, #1F1B4E); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: perspective(60rem); transform: perspective(60rem); position: fixed; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } .Menu-list { font-size: 4.25rem; line-height: 1.2; text-transform: uppercase; text-align: center; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; -webkit-transform: rotateX(-10deg) rotateY(20deg); transform: rotateX(-10deg) rotateY(20deg); } .Menu-list-item { position: relative; color: transparent; cursor: pointer; } .Menu-list-item::before { content: ''; display: block; position: absolute; top: 49%; left: -10%; right: -10%; height: 4px; border-radius: 4px; margin-top: -2px; background: #FF2C75; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98); transition: -webkit-transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98); transition: transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98); transition: transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98), -webkit-transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98); z-index: 1; } .Mask { display: block; position: absolute; overflow: hidden; color: #FF2C75; top: 0; height: 49%; -webkit-transition: all 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98); transition: all 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98); } .Mask span { display: block; } .Mask + .Mask { top: 48.9%; height: 51.1%; } .Mask + .Mask span { -webkit-transform: translateY(-49%); transform: translateY(-49%); } .Menu-list-item:hover .Mask, .Menu-list-item:active .Mask { color: #FFF; -webkit-transform: skewX(12deg) translateX(5px); transform: skewX(12deg) translateX(5px); } .Menu-list-item:hover .Mask + .Mask, .Menu-list-item:active .Mask + .Mask { -webkit-transform: skewX(12deg) translateX(-5px); transform: skewX(12deg) translateX(-5px); } .Menu-list-item:hover::before, .Menu-list-item:active::before { -webkit-transform: scale(1); transform: scale(1); } </style>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0