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; } .explore-menu:hover:after { box-shadow: 36px 4px 0px rgba(0, 0, 0, 0.06), 16px 12px 0px rgba(0, 0, 0, 0.06), 20px 8px 0px rgba(0, 0, 0, 0.06); } .explore-menu:active { --duration: .25s; --rotate: 16deg; --pickle-x: 2px; --top-y: -1px; --top-z: 24px; --ketchup-y: 0px; --ketchup-s: .975; --ketchup-z: 20px; --salad-s: .975; --salad-z: 16px; --cheese-y: 1px; --cheese-s: .975; --cheese-z: 12px; --beef-y: 1px; --beef-s: .965; --beef-z: 2px; --bottom-y: 1px; --bottom-s: .975; } .explore-menu:active:after { box-shadow: 24px 3px 0px rgba(0, 0, 0, 0.08), 10px 8px 0px rgba(0, 0, 0, 0.08), 16px 4px 0px rgba(0, 0, 0, 0.08); } .explore-menu .top { position: relative; z-index: 7; padding: 12px 0; background: radial-gradient(55% 165% at 50% 50%, #F0A151 0%, #D18334 100%); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2), inset 0px -2.5px 0px rgba(0, 0, 0, 0.15); border-radius: 26px; text-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.15); -webkit-transform: translateY(var(--top-y, 0)) translateZ(var(--top-z, 1px)); transform: translateY(var(--top-y, 0)) translateZ(var(--top-z, 1px)); -webkit-transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease); transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease); transition: transform var(--duration, 0.3s) var(--easing, ease); transition: transform var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease); } .explore-menu:before, .explore-menu:after { content: ''; display: block; position: absolute; } .explore-menu:before { left: -2px; top: 16px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; background: #A7BE5B; box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.25); -webkit-transform: translateX(var(--pickle-x, 8px)) translateZ(var(--pickle-z, 0)); transform: translateX(var(--pickle-x, 8px)) translateZ(var(--pickle-z, 0)); -webkit-transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease); transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease); transition: transform var(--duration, 0.3s) var(--easing, ease); transition: transform var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease); } .explore-menu:after { position: absolute; left: -2px; top: 0; width: 164px; height: 53px; background: #B1612E; border-radius: 26px; -webkit-transform: translateY(var(--bottom-y, 0)) scale(var(--bottom-s, 0.8)) translateZ(0); transform: translateY(var(--bottom-y, 0)) scale(var(--bottom-s, 0.8)) translateZ(0); -webkit-transition: box-shadow var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease); transition: box-shadow var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease); transition: transform var(--duration, 0.3s) var(--easing, ease), box-shadow var(--duration, 0.3s) var(--easing, ease); transition: transform var(--duration, 0.3s) var(--easing, ease), box-shadow var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease); } .explore-menu .ketchup, .explore-menu .salad, .explore-menu .cheese { position: absolute; left: 0; top: 0; display: block; width: 160px; -webkit-transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease); transition: -webkit-transform var(--duration, 0.3s) var(--easing, ease); transition: transform var(--duration, 0.3s) var(--easing, ease); transition: transform var(--duration, 0.3s) var(--easing, ease), -webkit-transform var(--duration, 0.3s) var(--easing, ease); } .explore-menu .ketchup { z-index: 6; height: 54px; fill: #D14253; -webkit-transform: translateY(var(--ketchup-y, 0)) scale(var.........完整代码请登录后点击上方下载按钮下载查看
网友评论0