css实现三维3d悬浮伸缩菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现三维3d悬浮伸缩菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap'> <style> .explore-menu { border: none; background: none; outline: none; color: #F9E7C5; font-size: 16px; line-height: 27px; font-weight: 800; font-family: 'Poppins', Arial; display: block; position: relative; cursor: pointer; width: 160px; text-align: center; border-radius: 26px; padding: 0; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; -webkit-transition: -webkit-transform var(--transform-duration, 0.4s); transition: -webkit-transform var(--transform-duration, 0.4s); transition: transform var(--transform-duration, 0.4s); transition: transform var(--transform-duration, 0.4s), -webkit-transform var(--transform-duration, 0.4s); will-change: transform; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: perspective(480px) rotateX(calc(var(--rotate, 0deg) + var(--rx, 0deg))) rotateY(calc(0deg + var(--ry, 0deg))) translateZ(0); transform: perspective(480px) rotateX(calc(var(--rotate, 0deg) + var(--rx, 0deg))) rotateY(calc(0deg + var(--ry, 0deg))) translateZ(0); } .explore-menu:hover { --rotate: 18deg; --easing: cubic-bezier(.8, .5, .2, 1.4); --transform-duration: .15s; --duration: .5s; --top-y: -3px; --top-z: 36px; --pickle-x: 0; --pickle-z: 5px; --ketchup-y: -2px; --ketchup-s: 1; --ketchup-z: 28px; --salad-s: 1; --salad-z: 24px; --cheese-y: 2px; --cheese-s: 1; --cheese-z: 16px; --beef-y: 2px; --beef-s: 1; --beef-z: 4px; --bottom-y: 2px; --bottom-s: 1; --pickle-y: 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0