念念不忘
必有回响

B站网页特效学习 — 折叠菜单效果

看到B站讲的不错的网页特效视频,在GitHub也有分享的demo,顺便记录一下总结,需要引入的CDN资源,额,这种折叠效果学过类似的了...

<!-- font-awesome --> <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />

折叠效果演示:demo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>FoldMenu</title> <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" /> <style> * { margin: 0; padding: 0; font-family: sans-serif; list-style: none; text-decoration: none; } .middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .menu { width: 300px; border-radius: 8px; overflow: hidden; } .item { /* border-top: 1px solid #2980b9; */ overflow: hidden; } .btn { display: block; padding: 16px 20px; background: #3498db; color: white; position: relative; } .btn::before { content: ''; position: absolute; width: 14px; height: 14px; background: #3498db; left: 20px; bottom: -7px; transform: rotate(45deg); } .btn i { margin-right: 10px; } .smenu { background: #333; overflow: hidden; transition: max-height 0.3s; max-height: 0; } .smenu a { display: block; padding: 16px 26px; color: white; font-size: 14px; margin: 4px 0; position: relative; } .smenu a:before { content: ''; position: absolute; width: 6px; height: 100%; background: #3498db; left: 0; top: 0; transition: 0.3s; opacity: 0; } .smenu a:hover::before { opacity: 1; } .item:target .smenu { max-height: 10em; } </style> </head> <body> <div class="middle"> <div class="menu"> <li class="item" id="Profile"> <a href="#Profile" class="btn"><i class="far fa-user"></i>Profile</a> <div class="smenu"> <a href="">Posts</a> <a href="">Picture</a> </div> </li> <li class="item" id="Message"> <a href="#Message" class="btn"><i class="far fa-envelope"></i>Message</a> <div class="smenu"> <a href="">new</a> <a href="">Sent</a> <a href="">Spam</a> </div> </li> <li class="item" id="Setting"> <a href="#Setting" class="btn"><i class="fas fa-cog"></i>Setting</a> <div class="smenu"> <a href="">Password</a> <a href="">Language</a> </div> </li> <li class="item" id="Login"> <a href="#Login" class="btn"><i class="fas fa-sign-out-alt"></i>Login</a> <div class="smenu"> <a href="">Login In</a> <a href="">Login Out</a> </div> </li> </div> </div> </body> </html>

效果图:

赞(0) 打赏
未经允许不得转载:小蚁上树 » B站网页特效学习 — 折叠菜单效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址