一只苹果风格的轮播

这是一个苹果风格的demo，乍一看，干净清爽，如果不乍一看的话 …… 会发现不少细节非常细致巧妙 ……

一直以来我也没怎么在意背景图片，这个 demo 让我深刻地见识到了，原来用背景图片可以简单地实现用基本 css 不容易实现的样式。

如果我们懂得一些轮播的原理，那么这个 demo 的技术难点都集中在导航栏：

Screen Shot 2019-06-27 at 12.54.13 AM.png

1.主图片的下阴影与下菜单按钮的共用；
2.主图片的下阴影是弧形的；
3.增加按钮立体感的左右按钮；
4.活动状态的按钮有个三角形与主图片联系到了一块；

通过阅读作者的代码，我惊讶地发现，以上这些样式，统统是通过背景图片实现的，图片的优点也明显，可以更简单干脆地实现 css 代码可能挺费劲才能达到的样式：

对于我自己来说，我真正关心的问题是，作者用图片实现的样式，我能不能不用图片，只用 css 完成呢？

事实证明，是可以的，花了写时间搞清楚了作者的思路，我就开始有了思路：

一、菜单栏背景渐变，并且主图片的弧形的下阴影与菜单栏共用；

值得注意的是，则是一个有点弧度的 shadow，解决的方法重新创造一个有点弧度的 element，那它的 shadow 来用，而把它本身隐藏起来就可以了
实际做法：
1.在菜单栏中创造一个椭圆 element(.roundShadow)，给菜单栏设置 overflow: hidden，生成 shadow 后再调节 shadow 的位置就可以了；

.menu .roundShadow {
  position: absolute;
  width: 920px;
  height: 2px;
  top : -5px;
  border-radius: 50%;
  box-shadow: 0 3px 4px 1px #e0e0e0;
  z-index: 0;}

2.设置了弧形阴影后，两边有些空白，于是再加入一个直线“阴影”(.lineShadow)：

.menu .lineShadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 920px;
  height: 0;
  border-bottom:
  1px solid #e0e0e0}

3.考虑到菜单栏有渐变效果，一块做了：

.menu {
  linear-gradient(#ffffff, #ececec);
  ...
}

Done！

二、增加按钮立体感的左右按钮；

按照作者背景选图的思路，立体按钮的效果就是通过在每个按钮右边加入一列占1像素的灰色以及一列白色。
于是，我们通过内阴影就可以达到一样的效果：

.menu button {
  box-shadow: inset -1px 0 #fefefe, inset -2px 0 #dddddd;
}

然后我们在单独给第一个按钮加一个左边内阴影就可以了！

三、活动状态的按钮有个三角形与主图片联系到了一块；

这一部分的难度稍低一些，
1.碰到三角形的话，常规思路就是加上一个 ::after，

.menu button.active::after {
  content: "";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top: -2px;
  border: 7px solid transparent;
  border-top-color: #ffffff;
  z-index: 2;
}

1.环形背景用 radial-gradient 就可以了：

main .menu button.active {
  background: radial-gradient(farthest-corner,#f0f0f0, #bbbbbb);
}

哈哈，完成，看起来也像模像样的

原版

赝品~

源代码