下划线动画导航条效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #222; } header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2.5rem; } .logo { font-size: 34px; line-height: 50px; text-align: center; text-decoration: none; color: white; } .site-nav { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } ul { display: flex; padding: 0; margin: 0; list-style-type: none; } ul:hover li:not(:hover) a { opacity: 0.2; } ul li { position: relative; padding: 30px 25px 30px 25px; cursor: pointer; } ul li::after { position: absolute; content: ""; top: 100%; left: 0; width: 100%; height: 2px; background: #3498db; transform: scaleX(0); transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } ul li:hover::after, ul li.active::after { transform: scaleX(1); } ul li a { position: relative; display: flex; color: white; font-family: Lato, sans-serif; text-decoration: none; transition: 0..........完整代码请登录后点击上方下载按钮下载查看
网友评论0