【真·3D】用css带你做一个3D侧边导航栏

蜡笔小心_
685 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情

前言

css专栏又迎来新篇章了，各种样式写了一遍之后，该做一点立体感的东西了，今天这篇文章就用css做一个3D的侧边导航栏看看吧。

文章内容相对来说是比较简单的，用到的元素标签也是基础的 ul、li、a、i。

涉及到的样式也是css专栏里面很多文章都用到的transform。

标签

😜 用到的标签都是很基础的哦，做出导航栏的样式就是循环 li 标签

<ul>
    <li>
      <a class='list-item' href=''>
        <i class='icon-reorder'></i>
      </a>
    </li>
</ul>
  • i 标签里面的 icon 样式使用的是 font-awesome 提供的哦

http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css

item样式

🤔 基础样式就自己随意发挥一下了

.list-item {
  background: #000;
  color: #575757;
  text-align: center;
  height: 2.5em;
  width: 4em;
  line-height: 2.5em;
  border-bottom: 1px solid #060606;
  position: relative;
  display: block;
  text-decoration: none;
}

image.png

🤔 给item添加hover伪类

.list-item:hover {
  background: #ff6e42;
  color: #fffcfb;
}
  • 在伪类中可以修改item的背景色和字体色

1.gif

🤔 在item的hover伪类中添加弹起动画效果

transform: translate(0.9em, -0.9em);
transition: all 0.25s linear;
box-shadow: -2em 2em 0 #e1e1e1;

2.gif

  • 由于我们在hover中添加弹起动画的时候，同时添加了一个底部的阴影效果，所以目前已经出现了一部分立体的效果

🤔 item动画落下的时候看起来比较生硬，我们可以给item也添加一个动画效果

transition: all 0.25s linear;

item样式的before和after伪类

🤔 目前看起来的效果还只是弹起的立体效果，我们还可以将item直接做成一个立体的效果。

🤔 这时候就可以用到before和after这两个伪类才实现了。

.list-item:after {
  height: 4em;
  background: #181818;
  bottom: -2.25em;
  left: 1.5em;
  transform: rotate(90deg) skew(0, 45deg);
}
.list-item:before {
  height: 2.5em;
  background: #121212;
  top: 0.25em;
  left: -0.5em;
  transform: skewY(-45deg);
}
  • 在画立体效果的时候，我们将一个边框进行了旋转，这样就可以贴合item默认的边框了。

🤔 同时给这两个伪类添加动画效果，和item的动画效果进行匹配

.list-item:before, .list-item:after {
  content: "";
  position: absolute;
  transition: all 0.25s linear;
  width: 0.5em;
}

🤔 最后还得给hover伪类继续添加两个伪类

.list-item:hover:before, .list-item:hover:after {
  transition: all 0.25s linear;
}
.list-item:hover:before {
  background: #b65234;
  width: 1em;
  top: 0.5em;
  left: -1em;
}
.list-item:hover:after {
  background: #b65234;
  width: 1em;
  bottom: -2.5em;
  left: 1em;
  height: 4em;
}

3.gif

码上掘金看效果

avatar
文章
阅读
粉丝