div+css实现鼠标悬浮子菜单旋转伸缩展开导航菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:div+css实现鼠标悬浮子菜单旋转伸缩展开导航菜单效果代码
代码标签: div css 鼠标 悬浮 子菜单 旋转 伸缩 展开 导航 菜单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <!-- partial:index.partial.html --> <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,800' rel='stylesheet' type='text/css'> <style> body { font-family: Alegreya Sans; background: #feeded; } .menu { position: relative; background: #cd3e3d; width: 3em; height: 3em; border-radius: 5em; margin: auto; margin-top: 5em; margin-bottom: 5em; cursor: pointer; border: 1em solid #fdaead; } .menu:after { content: ""; position: absolute; top: 1em; left: 1em; width: 1em; height: 0.2em; border-top: 0.6em double #fff; border-bottom: 0.2em solid #fff; } .menu ul { list-style: none; padding: 0; } .menu li { width: 5em; height: 1.4em; padding: 0.2em; margin-top: 0.2em; text-align: center; border-top-right-radius: 0.5em; border-bottom-right-radius: 0.5em; transition: all 1s; background: #fdaead; opacity: 0; z-index: -1; } .menu:hover li { opacity: 1; } /** * Add a pseudo element to cover the space * between the links. This is so the menu * does not lose :hover focus and disappear */ .menu:hover ul::before { position: absolute; content: ""; width: 0; height: 0; display: block; left: 50%; top: -5.0em; /** * The pseudo-element is a semi-circle * created with CSS. Top, bottom, and right * borders are 6.5em (left being 0), and then * a border-radius is added to the two corners * on the right. */ border-width: 6.5em; border-radius: 0 7.5em 7.5em 0; border-left: 0; border-style: solid; /** * Have to have a border color for the border * to be hoverable. I'm using a very light one * so that it looks invisible. */ border-color: rgba.........完整代码请登录后点击上方下载按钮下载查看
网友评论0