css实现三维3d翻转下拉菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现三维3d翻转下拉菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; :root { --z24: translateZ(24.5px); --z80: translateZ(80px); --ts: all .5s ease; --x90: rotateX(90deg); --xm90: rotateX(-90deg); --y90: rotateY(90deg); --ym90: rotateY(-90deg); } nav { width: 100%; padding: 16px 16px 0 16px; position: relative; } ol { width: 100%; margin: 0; padding: 0; list-style-type: none; } .main-menu { display: flex; position: relative; flex-flow: row wrap; justify-content: center; } li { width: 160px; position: relative; cursor: pointer; } li span { width: 100%; height: 49px; display: block; position: relative; transition: var(--ts); transform-style: preserve-3d; } li span::before, li span::after { width: 100%; padding: 16px 0; display: block; position: absolute; border-radius: 8px; font: 400 1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0