点击查看【bilibili】
本案例使用flex布局，hover效果使用了垂直居中，运用了一些动画效果（transform，translate）

思路

  1. 先用定位实现整体布局
  2. 设置hover动画
  3. 设置点击事件，控制整体的缩放

    代码

    html&js

    ```html <!DOCTYPE html> 

  1. <a name="hEYay"></a>
  2. ### css
  3. ```css
  4. * {
  5.   margin: 0;
  6.   padding: 0;
  7. }
  8. #menu-overlay {
  9.   position: fixed;
  10.   top: 0;
  11.   left: 0;
  12.   right: 0;
  13.   bottom: 0;
  14.   background-color: #f00;
  15.   display: flex;
  16.   justify-content: center;
  17.   align-items: center;
  18.   /* 垂直方向溢出产生滚动条 */
  19.   overflow-y: auto;
  20.   transform: scale(0);
  21.   /* 添加过渡 */
  22.   transition: 0.5s;
  23. }
  24. #menu-overlay.active {
  25.   transform: scale(1);
  26. }
  27. #menu-overlay ul li {
  28.   list-style: none;
  29.   text-align: center;
  30.   display: block;
  31. }
  32. #menu-overlay ul li a {
  33.   position: relative;
  34.   text-decoration: none;
  35.   font-size: 3.5em;
  36.   padding: 0 10px;
  37.   color: #fff;
  38.   font-weight: 700;
  39.   /* 改为大写 */
  40.   text-transform: uppercase;
  41.   display: inline-block;
  42. }
  43. /* 使用伪元素的方式添加中间的黄色横条 */
  44. #menu-overlay ul li a:before {
  45.   content: '';
  46.   position: absolute;
  47.   top: 50%;
  48.   left: 0;
  49.   width: 100%;
  50.   height: 8px;
  51.   background: #ff0;
  52.   transform: translateY(-50%) scaleX(0);
  53.   transform-origin: right;
  54.   transition: 0.5s transform;
  55. }
  56. #menu-overlay ul li a:hover:before {
  57.   transform: translateY(-50%) scaleX(1);
  58.   transform-origin: left;
  59.   transition: 0.5s transform;
  60. }
  61. #toggleIcon {
  62.   /* 固定在右上角 */
  63.   position: fixed;
  64.   top: 20px;
  65.   right: 20px;
  66.   width: 50px;
  67.   height: 50px;
  68.   z-index: 1;
  69.   cursor: pointer;
  70.   background: #ff0 url(open.png);
  71.   transition: 0.5s;
  72. }
  73. #toggleIcon.active {
  74.   background: #ff0 url(close.png);
  75. }