50projects50days知识点-14-animated-navigation

示例网址：

https://50projects50days.com/projects/animated-navigation/

http://50projects.tc.cluski.top/50projects50days/animated-navigation/

效果：

思路：

背景使用background-image: linear-gradient()来做。

按钮在激活非激活状态的时候需要加上旋转（transform: rotate(-765deg)），这样在加上动画之后，即可有上图的效果。文字的旋转也是如此。（注意文字的旋转需要加在li上，不然达到的效果会不一样）

此外文字的消失和显示可以使用opacity属性，加上动画就变成上图的样子。

linear-gradient()

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<grdient>数据类型，是一种特别的<image>数据类型。

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度 40% 位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

渐变轴为45度，从蓝色渐变到红色:

参考链接：linear-gradient() - CSS：层叠样式表 | MDN (mozilla.org)