html弧形列表效果,web前端入门到实战：html5网页特效-弧形菜单

效果：

弧形菜单，文字按规则变形以及变换透明度

简单的javascript，上手难度：简单

学习笔记：

text-decoration:

最主要的功能就是给文字加上附着在文字底部，上方，或者中间的线(删除线)。

默认。定义标准的文本。

underline

定义文本下的一条线。

overline

定义文本上的一条线。

line-through

定义穿过文本下的一条线。

inherit

规定应该从父元素继承 text-decoration 属性的值。

隐藏超出边界的子元素：

该例子中有13个菜单项，但只显示出12个，因为第1个和第13个超出了父元素的边界，被隐藏了。

overflow: hidden;

渐入隐藏效果：

第2，3，11，12个虽然没有被隐藏，但看起来很朦胧。这样的效果首先是设置透明度，嗯，nth-child的用法

.item:nth-child(2), .item:nth-child(3), .item:nth-child(11), .item:nth-child(12) {

opacity: 0.2;

}

然后是邻近顶部和底部的线性渐变，这样看来菜单项似乎和背景融为一体了

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法(详细的前端项目实战教学视频，PDF)

.top {

top: 0;

background: linear-gradient(to bottom, steelblue 0%, rgba(70, 130, 180, 0) 100%);

}

.bottom {

bottom: 0;

background: linear-gradient(to bottom, rgba(70, 130, 180, 0) 0%, steelblue 100%);

}

按钮触摸渐变：

下面这行代码的效果时，当鼠标放上按钮时，按钮花3秒从白色渐变成黑色，离开时立马从黑色变为白色。

.btn {

color: white;

}

.btn:hover {

color: black;