50projects50days知识点-rotating-nav-animation

示例网址：

https://50projects50days.com/projects/rotating-navigation-animation/

http://50projects.tc.cluski.top/50projects50days/rotating-nav-animation/

预览

技巧

• 使用transform: translateX(-100%);将nav中的内容左移，左移出了视图之外，使nav在非展示状态下看不到了。

• 使用position: fixed;使圆形按钮可以固定在页面的左上角

• 左上角的按钮其实是一个大圆，但是被隐去了3/4，并且在点击的时候进行旋转（通过CSS来实现的）

邻接兄弟选择器

在例子中使用到了邻接兄弟选择器：

nav ul li + li {
    margin-left: 15px;
    transform: translateX(-150%);
}

nav ul li + li + li {
    margin-left: 30px;
    transform: translateX(-200%);
}

邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。

参考链接：

关系选择器 - 学习 Web 开发 | MDN (mozilla.org)

对于例子中来说，使用邻接兄弟选择器可以很方便的选择到ul中的第二个、第三个li，同样也可以使用伪类选择器中的:nth-child来选择第二个、第三个li。

nav ul li:nth-child(2) {
    margin-left: 15px;
    transform: translateX(-150%);
}

nav ul li:nth-child(3) {
    margin-left: 30px;
    transform: translateX(-200%);
}