CSS实现3D菜单效果

CSS特效

2020年06月11日 19:25:13959

//cdn.shiniest.cn/static/202302/3d_menu.png//cdn.shiniest.cn/static/202302/3d_menu_active.png
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Menu</title>
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background: #111;
      }
      ul {
        margin: auto;
        width: 200px;
        margin-top: 200px;
        transform: skewY(-7deg);
        user-select: none;
      }
      ul >li {
        list-style: none;
        letter-spacing: .1em;
        background: #444;
        position: relative;
        padding: 15px;
        z-index: var(--i);
        transition: all .2s;
        cursor: pointer;
      }
      ul > li:after {
        content: '';
        position: absolute;
        height: 100%;
        width: 30px;
        top: 0;
        left: -30px;
        background: #333;
        transform: skewY(45deg);
        transform-origin: right;
      }
      ul > li:before {
        content: '';
        position: absolute;
        height: 30px;
        width: 100%;
        background: #222;
        top: -30px;
        left: 0;
        transform: skewX(45deg);
        transform-origin: bottom;
      }
      ul >li:hover {
        transform: translateX(-50px);
      }
      ul >li:hover {
        background: #27a9ff;
        color: #fff;
      }
      ul >li:hover:after {
        background: #2086ca;
      }
      ul >li:hover:before {
        background: #19679b;
      }
      ul :last-child {
        box-shadow: -15px 100px 70px gray;
      }
    </style>
  </head>
  <body>
    <ul>
      <li style="--i: 5;">Home Page</li>
      <li style="--i: 4;">About Me</li>
      <li style="--i: 3;">Contact</li>
      <li style="--i: 2;">Article</li>
      <li style="--i: 1;">Login</li>
    </ul>
  </body>
</html>
赞 12
收藏
分享

本作品系 原创,作者:你不熟悉的x先生

原文链接:https://shiniest.cn/blog/article/64

文本版权:文本版权归作者所有

转载需著名并注明出处(禁止商业使用)

评论和回复

0/500
    没有更多啦~
    怎么一条数据都没有呢?
简介
CSS实现3D菜单效果
目录

D&D By x先生 With