CSS实现3D菜单效果

偏执的太偏执、 2023-10-07 20:16 42阅读 0赞

#### 阅读目录 ####

*  效果
 *   *  index.html
     *  index.css

## 效果 ##

![在这里插入图片描述][eb25e4d8324a44af96c6a2ff498e4635.gif_pic_center]

### index.html ###

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>CSS实现3D菜单效果</title>
 	
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
 	<link rel="stylesheet" href="index.css">
 </head>
 <body>
 <ul>
 <li style="--i:8;--clr:#00a6bc;">
 		 <a href="">
 			 
 				 
 			 网站首页</a>
 	 </li>
 <li style="--i:7;--clr:#0a66c2;"><a href="">HTML/CSS </a></li>
 <li style="--i:6;--clr:#1da1f2;"><a href="">JavaScript</a></li>
 <li style="--i:5;--clr:#c32aa3;"><a href=""> 源码案例</a></li>
 <li style="--i:4;--clr:#d4620b;"><a href=""> 电子书</a></li>
 <li style="--i:3;--clr:#0a66c2;"><a href=""> 在线课程</a></li>
 <li style="--i:2;--clr:#d30aa8;"><a href=""> 建站主机</a></li>
 <li style="--i:1;--clr:#00a6bc;"><a href=""> 开发工具</a></li>
 </ul>
 </body>
 </html>

### index.css ###

*
    {
        
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Oswald', sans-serif;
    }
    body 
    {
        
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #434750;
      gap: 130px;
    }
    ul 
    {
        
      position: relative;
      transform: skewY(-15deg);
    }
    ul li 
    {
        
      position: relative;
      list-style: none;
      width: 120px;
      padding: 15px;
      background: #3e3f46;
      z-index: calc(1 * var(--i));
      transition: 0.5s;
    }
    ul li:hover 
    {
        
      background: var(--clr);
      transform: translateX(-50px);
    }
    ul li::before 
    {
        
      content: '';
      position: absolute;
      top: 0;
      left: -40px;
      width: 40px;
      height: 100%;
      background: #3e3f46;
      filter: brightness(0.7);
      transform-origin: right;
      transform: skewY(45deg);
      transition: 0.5s;
    }
    ul li:hover::before 
    {
        
      background: var(--clr);
      filter: brightness(0.7);
    }
    ul li::after 
    {
        
      content: '';
      position: absolute;
      top: -40px;
      left: 0px;
      width: 100%;
      height: 40px;
      background: #3e3f46;
      filter: brightness(0.9);
      transform-origin: bottom;
      transform: skewX(45deg);
      transition: 0.5s;
    }
    ul li:hover::after 
    {
        
      background: var(--clr);
      filter: brightness(0.9);
    }
    ul li a 
    {
        
      text-decoration: none;
      color: #999;
      display: block;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      transition: 0.5s;
    }
    ul li:hover a
    {
        
      color: #fff;
    }
    ul li:last-child::after 
    {
        
      box-shadow: -120px 120px 20px rgba(0,0,0,0.25);
    }
    ul li a span 
    {
        
      position: absolute;
      top: 0;
      left: -40px;
      width: 40px;
      text-align: center;
      height: 100%;
      transform-origin: right;
      transform: skewY(45deg);
      transition: 0.5s;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.25em;
      opacity: 0.5;
    }
    ul li:hover a span 
    {
        
      opacity: 1;
    }

[eb25e4d8324a44af96c6a2ff498e4635.gif_pic_center]: https://img-blog.csdnimg.cn/eb25e4d8324a44af96c6a2ff498e4635.gif#pic_center