纯css的导航条吉他特效
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> - Navbar Interaction</title> <style> html, body { height: 100%; } body { margin: 0; background-color: #292929; overflow: hidden; } nav { position: absolute; top: 50%; right: 0; left: 0; width: 319px; display: table; margin: 0 auto; transform: translateY(-50%); } nav a { position: relative; width: 33.333%; display: table-cell; text-align: center; color: #949494; text-decoration: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; padding: 10px 20px; transition: 0.2s ease color; } nav a:before, nav a:after { content: ""; position: absolute; border-radius: 50%; transform: scale(0); transition: 0.2s ease transform; } nav a:before { top: 0; left: 10px; width: 6px; height: 6px; } nav a:after { top: 5px; left: 18px; width: 4px; height: 4px } nav a:nth-child(1):before { background-color: yellow; } nav a:nth-child(1):after { background-color: red; } nav a:nth-child(2):before { background-color: #00e2ff; } nav a:nth-child(2):after { background-color: #89ff00; } nav a:nth-child(3):before { background-color: purple; } nav a:nth-child(3):after { background-color: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0