菜单文字悬浮分离切换动画效果
代码语言:html
所属分类:菜单导航
代码描述:菜单文字悬浮分离切换动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; margin: 0; padding: 0; } :root { font-size: 16px; --link-translate-x: 3rem; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; overflow: hidden; } a { text-decoration: none; } a:focus { outline: none; border: none; } .nav__link { font-size: 5rem; color: #fff; display: grid; font-style: italic; } .nav__link--text { grid-area: 1/1; transition: opacity 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .nav__link--text .word { white-space: nowrap; } .nav__link--text .char { display: inline-block; transform-origin: 50% 50% 0.4em; transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1); transition-delay: calc(0ms + var(--char-index) * 25ms); backface-visibility: hidden; margin: 0 -0.02em; } .nav__link--text:nth-child(1) { font-weight: 500; } .nav__link--text:nth-child(2) { font-weight: 500; opacity: 0; } .nav__link--text:nth-child(2) .char { transform: rotate3d(1, -0.5, 0, 90deg); } .nav__link:hover .nav__link--text { transform: translateX(var(--link-translate-x)); } .nav__link:hover .nav__link--text:nth-child(1) { opacity: 0; } .nav__link:hover .nav__link--text:nth-child(1) .char { transform: rotate3d(1, 0.3, 0, -90deg); } .nav__link:hover .nav__li.........完整代码请登录后点击上方下载按钮下载查看
网友评论0