css布局实现带阴影下拉菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css布局实现带阴影下拉菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Raleway:200,400" rel="stylesheet"> <style> body { background: #ece5da; font-family: 'Raleway', sans-serif; } nav { margin: auto; margin-top: 40px; position: relative; width: 50vw; min-width:220px; height: 200px; } nav h2 { border-radius: 2px; position: relative; background: tomato; height: 40px; text-transform: uppercase; color: ivory; font-weight: 200; display: flex; flex: 1; justify-content: center; align-items: center; box-shadow: 4px 4px 20px -2px rgba(0,0,0,.35); transition: all .4s; } nav:hover h2{ transform: translateY(-2px); box-shadow: 2px 2px 5px -1px rgba(0,0,0,.35); } nav:hover:active h2{ transform: translateY(10px); box-shadow: 0px -1px 2px 0px rgba(0,0,0,.35); } input { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; opacity: 0; cursor: pointer; height: 40px; } #toggle:checked ~ul { height: 0%; } nav ul { padding-left: 0; padding-top: 0; margin-top: 0; list-style: none; overflow: hidden; text-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0