AD
张北资讯>健康养生>大嬴家国际|CSS3导航菜单背景模糊特效代码解析/源码下载

大嬴家国际|CSS3导航菜单背景模糊特效代码解析/源码下载

2020-01-11 10:51:03 作者:匿名 阅读量:929
摘要: css3导航菜单背景模糊特效代码解析/源码下载在第二个demo中,鼠标hover时菜单项有些倾斜效果。我们将使用一个相当缓慢的线性转换:鼠标hover时其它所有项更模糊,当前项变清晰并放大:css3导航菜单背景模糊特效代码解析/源码下载在这个demo中给超链接元素半透明的黑色背景和橙色的文字颜色。

大嬴家国际|CSS3导航菜单背景模糊特效代码解析/源码下载

大嬴家国际,这是一款使用css3 transition制作的导航菜单背景牧户动画特效。

7个demo使用了相同的html结构:

通用css部分如下:

css3导航菜单背景模糊特效代码解析/源码下载

在第一个demo中,我们希望菜单项在开始时是模糊的。为了做到这一点,我们给超链接元素透明的颜色和白色的文字阴影。并为所有的属性添加transitions。

当鼠标滑过某个菜单项时,我们希望它变得清晰,而其他项更模糊。在这里不能使用兄弟选择器来获取“其它”所有的菜单项,只能获取当前鼠标滑过菜单项后面的菜单项。所以在这里要使用一点小技巧,因为所有的菜单项都被设置为块级元素,因此可以简单的在鼠标hover的时候将整个菜单都变得模糊,然后将当前项变清新即可。

css3导航菜单背景模糊特效代码解析/源码下载

在第二个demo中,鼠标hover时菜单项有些倾斜效果。我们将使用 2d transforms 来完成倾斜效果。倾斜的角度将被设置为x轴方向的-12度。超链接的背景色使用rgba设置为半透明。还为文字添加一个稍微透明的文字阴影。

鼠标滑过菜单项时,设置倾斜角度为0,并通过设置半透明背景使菜单变得模糊,当前hover的菜单项没有背景:

css3导航菜单背景模糊特效代码解析/源码下载

第三个demo中文字大小做了些变化。开始时是菜单文字缩小、变模糊。我们将使用一个相当缓慢的线性转换:

鼠标hover时其它所有项更模糊,当前项变清晰并放大:

css3导航菜单背景模糊特效代码解析/源码下载

在这个demo中给超链接元素半透明的黑色背景和橙色的文字颜色。这个demo中将使用到 timing transition。

当鼠标hover的时候,菜单项模糊,它们的背景色更加透明。当前hover项将不透明:

我们通过指定一些时间延时来制作缩略图依次出现的效果:

css3导航菜单背景模糊特效代码解析/源码下载

第5个demo使用白色的文字阴影和文本颜色,我们只轻微的模糊菜单项元素:

鼠标滑过时将使菜单项模糊一些并稍稍移动一点距离:

css3导航菜单背景模糊特效代码解析/源码下载

第6个demo设置背景色为半透明白色:

使用first-child和last-child选择器为第一个和最后一个元素添加圆角:

鼠标hover时其它元素模糊,当前元素变清晰,并且背景色变透明:

css3导航菜单背景模糊特效代码解析/源码下载

最后一个demo通过设置 border radius 为宽高的一半将菜单变为圆形。

这里添加transitions是为了在鼠标滑过时背景有动画效果,通过rgba将背景变得更加透明:

调整一下菜单项文字大小和行高:

菜单项元素将被缩小和模糊:

鼠标滑过时将使元素更加模糊,给当前hover元素一个好看的背景色,并使它的文字大小恢复到原来的尺寸:

源码演示/下载请点击了解更多

↓↓↓↓↓↓