这种样式的导航条是怎么制作出来的

img


这种导航条的效果是咋做出来的啊,这种有点立体的效果咋做出来的

用图片或者样式写

css样式,打开F12开发者工具就能看到了

  1. 后面蓝条用图片或者设置背景色为渐变色background-image: linear-gradient(....)
  2. 设置导航条阴影 box-shadow: 0 0 10px 4px #ccc;
  3. 可以设置导航条旋转 transform:rotateX(30deg)
  4. 设置透视效果 例如:perspective:200px,就能有3d效果了