css+div实现下拉菜单动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:css+div实现下拉菜单动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .area::after { content: ""; display: block; width: 101%; } </style> <style> :root { --clr: #2196f3; --bgc: #ffffff; --icon: #ffffff; --tra: all 0.5s ease 0s; } body { height: 100vh; margin: 0; display: grid; place-items: center; background: linear-gradient(to bottom, #4e4376, #2b5876); font: 1em system-ui, sans-serif; line-height: 1.4; } body:before, body:after { content: ""; position: absolute; width: 1em; height: 1em; border: 0em solid #fff; border-width:0 0 0.2em 0.2em; transform: rotate(45deg); left: 1.25em; bottom: 1.35em; border-radius: 0.1em; } body:after { left: inherit; right: 1.25em; transform: rotate(-135deg); } h2 { line-height: 1.25; margin: 1em 0 1em 0; color: #4d4476; font-weight: 500; } .area { background: linear-gradient(-88.75deg, #fff0 1.5em, var(--bgc) calc(1.5em + 1px) 55%, #fff0 calc(55% + 1px)), linear-gradient(88.75deg, #fff0 1.5em, var(--bgc) calc(1.5em + 1px) 55%, #fff0 calc(55% + 1px)); padding: 3em 4em; width: 20em; transition: var(--tra); position: relative; /*overflow: auto;*/ word-wrap: break-word; filter: drop-shadow(0px 10px 10px #0008); } .area:before { content: ""; background: var(--clr); width: 100%; height: 3.5em; position: absolute; top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 99% 100%, 1% 85%); } .area:after { content: ""; background: linear-gradient(178.5deg, #fff0 1.15em, #fff calc(1.15em + 1px)); width: calc(100% - 1em) !important; height: 1.75em; position: absolute; top: -1.75em; left: 0.5em; } .menu { position: absolute; top: 0.5rem; right: 1.5em; } .menu > button { border: 0; background: #fff0; transition: all 0.5s ease 0s; padding: 0.35em; } .menu-icon-svg { width: 2em; fill: #fff; } .menu-list { list-style: none; margin: 0; position: absolute; top: 3em; right: -0.4em; padding: 0; text-align: left; max-height: 0; overflow: hidden; transition: all 0.5s ease 0s; transform: rotate(1deg); width: 26em; } img { width: 100%; opacity: 0.25; margin-top: 0.5em; margin-bottom: -1em; transform: scale(0.9) scaleY(0.75); filter: invert(0.3) sepia(1.25) saturate(3) hue-rotate(190deg) brightness(1.25) contrast(1); } /* .menu ul { animation: start 1s ease 0s 2 alternate; transition: max-height 0.5s ease 0s; } */ .menu:hover ul { max-height: 10em; transition: max-height 0.5s ease 0s; box-shadow: 0.3em 1.25em 0.125em 0 #fff8; } .menu ul li { background: linear-gradient(89deg, #fff 0.15em, var(--clr) calc(0.15em + 1px)); border-bottom: 0.25em solid #fff; position: relative; } .menu ul li:nth-child(2) { background: linear-gradient(89deg, #fff 0.225em, var(--clr) calc(0.225em + 1px)); } .menu ul li:last-child { background: linear-gradient(88.5deg, #fff0 0.3em, var(--clr) calc(0.3em + 1px)); } .menu:hover button { background: #fff0; transition: all 0.5s ease 0s; fill: #f60; } .menu-icon-svg { width: 2em; fill: #fff; } ul li a { padding: 0.5em; margin: 0 0.5em; display: block; text-decoration: none; font-weight: 500; color: #fff; } ul li a:before { content: ""; position: absolute; box-sizing: border-box; width: 1em; height: 1em; right: 1.25em; top: 0.85em; border-radius: 0.1em; background: conic-gradient(from 90deg at 65% 60%, var(--icon) 0 25%, #fff0 0 100%), conic-gradient(from 180deg at 35% 60%, var(--icon) 0 25%, #fff0 0 100%), conic-gradient(from 135deg at 50% 0%, var(--icon) 0 25%, #fff0 0 100%); background-repeat: no-repeat; background-size: 100% 100%, 100% 100%, 100% 0.65em; } ul li a:after { content: ""; position: absolute; box-sizing: border-box; width: 1.2em; height: 1.2em; right: 1.1em; top: 0.65em; border: 0.25em solid var(--icon); border-right-width: 0; border-bottom-width: 0; transform: rotate(45deg); border-radius: 0.25em; } ul li:nth-child(2) a:before { content: ""; position: absolute; box-sizing: border-box; background: linear-gradient(180deg, var(--icon) 0 0.25em, #fff0 0 0.5em, var(--icon) 0 0.625em, #fff0 0 1.1em, var(--icon) 0 100%), linear-gradient(90deg, var(--icon) 0 0.55em, #fff0 0 0.8em, var(--icon) 0 100%); width: 1.4em; height: 1.4em; margin-top: -0.35em; margin-right: -0.2em; border-radius: 100%; } ul li:nth-child(3) a:before { content: ""; position: absolute; box-sizing: border-box; width: 1.45em; height: 1.1em; margin-top: -0.25em; margin-right: -0.2em; background: conic-gradient(from 45deg at 50% 65%, #fff0 0 75%, var(--icon) 0 100%), conic-gradient(from 45deg at 50% 83%, var(--icon) 0 75%, #fff0 0 100%); } ul li + li a:after { display: none; } ul li:hover { --clr: #4d4376; transition: var(--tra); } ul li a span { margin-left: 0; } ul li a:hover span { margin-left: calc(100% - 5em); transition: var(--tra); } ul li:nth-child(2) a:hover span { margin-left: calc(100% - 5.15em); } ul li:nth-child(3) a:hover span { margin-left: calc(100% - 6em); } .area::after { width: 100%;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0