用css3过渡实现三级菜单_具有CSS3过渡的模糊菜单

用css3过渡实现三级菜单

View demo 查看演示 Download Source 下载源

There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.

CSS3带给我们的附加属性和可能性可以做很多事情。 今天，我想向您展示如何对文本阴影和过渡进行实验，以实现模糊效果，我们将其应用于悬停在元素上的菜单。 主要思想是在增强我们当前正在徘徊的项目的同时模糊其他项目。

The images in the demos are by fabulous Mark Sebastian and they are licensed under the Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) License. Visit Mark’s Flickr Photostream or his website to discover some beautiful photography.

演示中的图像由神话般的Mark Sebastian制作，并根据Attribution-ShareAlike 2.0 Generic(CC BY-SA 2.0)许可进行了许可。 访问Mark的Flickr Photostream或他的网站，发现一些美丽的摄影作品。

Please note that this will only work properly in modern browsers and unfortunately Internet Explorer does not belong to that category yet since it does not support transitions (and many other suggested CSS3 properties that others do support). It also does not support text-shadows, so I’ve added a additional stylesheet for IE which will at least show the menu elements.

请注意，这只能在现代浏览器中正常工作，不幸的是Internet Explorer尚不属于该类别，因为它不支持转换(以及其他人确实支持的许多其他建议CSS3属性)。 它还不支持文本阴影，因此我为IE添加了一个附加样式表，该样式表至少将显示菜单元素。

标记 (The Markup)

Let’s create the HTML structure for our menu first. We’ll add it to a container with a fixed width. The menu is going to look as follows:

首先，为菜单创建HTML结构。 我们将其添加到具有固定宽度的容器中。 菜单将如下所示：

<ul class="bmenu">
	<li><a href="#">About</a></li>
	<li><a href="#">Illustrations</a></li>
	<li><a href="#">Photography</a></li>
	<li><a href="#">Web Design</a></li>
	<li><a href="#">Personal Projects</a></li>
	<li><a href="#">Contact</a></li>
</ul>

Now we’ll add some style!

现在，我们将添加一些样式！

CSS (The CSS)

In almost all of our examples we’ll have the same style for the ul and for the list elements. Just the link element will be modified. So, the common style for the unordered list is the following:

在几乎所有示例中，ul和list元素的样式都相同。 仅链接元素将被修改。 因此，无序列表的通用样式如下：

.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    font-size: 50px;
    display: block;
}

Now, let’s take a look at each of the seven examples.

现在，让我们看一下这七个示例。

例子1 (Example 1)

In the first example we want to show the menu items slightly blurred initially. For that, we’ll give the link elements transparent color and a white text-shadow. We’ll also add the transitions for all properties:

在第一个示例中，我们希望显示菜单项最初稍微模糊。 为此，我们将为链接元素提供透明的颜色和白色的文本阴影。 我们还将为所有属性添加过渡：

.bmenu li a{
	color: transparent;
	display: block;
	text-transform: uppercase;
	text-shadow: 0px 0px 5px #fff;
	letter-spacing: 1px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

When hovering over a link element, we want it to become “clear” and all the others should become blurry. Now, we cannot say “on hover of a particular element do x to all the siblings” in CSS because the sibling selector is not really a sibling selector, it will just give you the next siblings in the HTML.

将鼠标悬停在链接元素上时，我们希望它变得“清晰”，而所有其他元素都应该变得模糊。 现在，我们不能说“在特定元素上悬停时对所有同级对象执行x操作”，因为同级选择器并不是真正的同级选择器，它只会为您提供HTML中的下一个同级对象。

Anyway, we can do a little trick here. Since we have all our items nicely laid out as block elements, we can simply say, make everything blurry when we hover the whole menu (the unordered list) and then when hovering over a specific item we’ll crisp it up:

无论如何，我们可以在这里做一些技巧。 由于我们所有的项目都很好地布置为块元素，因此我们可以简单地说：将鼠标悬停在整个菜单(无序列表)上时，一切都会变得模糊，然后将鼠标悬停在特定项目上时，我们会将其整理：

.bmenu:hover li a{
	text-shadow: 0px 0px 5px #0d1a3a;
}
.bmenu li a:hover{
	color: #fff;
	text-shadow: 0px 0px 1px #fff;
	padding-left: 10px;
}

By adding a padding left, we’ll animate the currently hovered item a bit to the right.

通过向左添加填充，我们可以使当前悬停的项目向右移动动画。

例子2 (Example 2)

In the second example, we’ll show the items in the menu a bit skewed initially. We’ll do that with the 2D transforms property skew. The value will be -12 degrees which is the skewing angle along the x axis. The link s will have a semi-transparent background that we’ll achieve by using an rgba value. We’ll also add a slighty transparent text-shadow using rgba:

在第二个示例中，我们将显示菜单中的项目最初有些偏斜。 我们将使用2D transforms属性skew做到这一点。 该值将是-12度，即沿着x轴的倾斜角度。 链接s具有半透明的背景，我们将通过使用rgba值来实现该背景。 我们还将使用rgba添加稍微透明的文本阴影：

.bmenu li a{
	display: block;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(89,22,20,0.3);
	color: #581514;
	padding: 5px 20px;
	margin: 2px;
	background: rgba(255,255,255,0.2);
	letter-spacing: 1px;
	-webkit-transform: skew(-12deg);
	-moz-transform: skew(-12deg);
	-o-transform: skew(-12deg);
	-ms-transform: skew(-12deg);
	transform: skew(-12deg);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

Hovering over the menu, we’ll change the skew angle to 0 and make them appear blurry with a semi-transparent background. The currently hovered link will have no background:

将鼠标悬停在菜单上，将偏斜角更改为0，并使它们在具有半透明背景的情况下显得模糊。 当前悬停的链接将没有背景：

.bmenu:hover li a{
	color: transparent;
	text-shadow: 0px 0px 10px #fff;
	background: rgba(88,22,22,0.2);
	-webkit-transform: skew(0deg);
	-moz-transform: skew(0deg);
	-o-transform: skew(0deg);
	-ms-transform: skew(0deg);
	transform: skew(0deg);
}
.bmenu li a:hover{
	background: transparent;
	text-shadow: 1px 1px 10px rgba(89,22,20,0.6);
	color: #581514;
}

例子3(Example 3)

In the third example we will play a bit with the sizes of the elements. We’ll initially scale them down and blur them. We’ll use a fairly slow linear transition:

在第三个示例中，我们将使用元素的大小。 我们将首先缩小它们并使其模糊。 我们将使用相当缓慢的线性过渡：

.bmenu li a{
	white-space: nowrap;
	color: transparent;
	display: block;
	text-transform: uppercase;
	text-align: center;
	text-shadow: 0px 0px 6px #fff;
	letter-spacing: 1px;
	-moz-transform: scale(0.5); 
	-ms-transform: scale(0.5); 
	-o-transform: scale(0.5); 
	-webkit-transform: scale(0.5); 
	transform: scale(0.5); 
	-webkit-transition: all 0.6s linear;
	-moz-transition: all 0.6s linear;
	-o-transition: all 0.6s linear;
	-ms-transition: all 0.6s linear;
	transition: all 0.6s linear;
}

Hovering over the menu, well blur the items even more and the currently hovered element will be sharpened up and scaled to the original size:

将鼠标悬停在菜单上，可以使项目更加模糊，并且当前悬停的元素将被锐化并缩放为原始大小：

.bmenu:hover li a{
	text-shadow: 0px 0px 15px #fff;
}
.bmenu li a:hover{
	text-shadow: 0px 0px 1px #fff;
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	-webkit-transform: scale(1); 
	transform: scale(1); 
}

例子4(Example 4)

timing transition function here: 时序转换函数：

.bmenu li a{
	display: block;
	text-transform: uppercase;
	text-shadow: 0px 0px 2px #eeb213;
	color: #eeb213;
	padding: 5px 20px;
	margin: 2px;
	background: rgba(0,0,0,0.7);
	letter-spacing: 1px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

When we hover, we want the menu items to blur and and also to make their backgrounds more transparent. A single hovered item will become more opaque:

当我们将鼠标悬停时，我们希望菜单项变得模糊，并使它们的背景更加透明。 单个悬停的项目将变得更加不透明：

.bmenu:hover li a{
	text-shadow: 0px 0px 10px #eeb213;
	color: transparent;
	background: rgba(0,0,0,0.2);
}
.bmenu li a:hover{
	background: rgba(0,0,0,1.0);
	text-shadow: 0px 0px 1px #eeb213;
}

例子5(Example 5)

.bmenu li a{
	color: transparent;
	display: block;
	text-transform: uppercase;
	text-shadow: 0px 0px 4px #fff;
	letter-spacing: 1px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

On hover we’ll blur a little more and crisp up and move the currently hovered link element a bit:

悬停时，我们将模糊一些并整理一下，并稍微移动当前悬停的链接元素：

.bmenu:hover li a{
	text-shadow: 0px 0px 6px #fff;
}
.bmenu li a:hover{
	color: #fff;
	text-shadow: 0px 0px 1px #fff;
	padding-left: 10px;
}

例子6(Example 6)

.bmenu li a{
	white-space: nowrap;
	display: block;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(71,80,23,0.3);
	color: #fff;
	padding: 5px 20px;
	margin: 2px;
	background: rgba(255,255,255,0.2);
	letter-spacing: 1px;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

We want to give the first and last element some rounded borders so that the menu looks like a neat unit. We’ll target our desired elements with the first-child and last-child selectors:

我们要给第一个和最后一个元素一些圆角的边框，以便菜单看起来像一个整洁的单元。 我们将使用第一个孩子和最后一个孩子选择器来定位所需的元素：

.bmenu li:first-child a{
	-webkit-border-radius: 15px 15px 0px 0px;
	-moz-border-radius: 15px 15px 0px 0px;
	border-radius: 15px 15px 0px 0px;
}
.bmenu li:last-child a{
	-webkit-border-radius: 0px 0px 15px 15px;
	-moz-border-radius: 0px 0px 15px 15px;
	border-radius: 0px 0px 15px 15px;
}

On hover, we want the elements to look blurry and the currently hovered element to change colors and have a transparent background:

悬停时，我们希望元素看起来模糊，而当前悬停的元素要更改颜色并具有透明背景：

.bmenu:hover li a{
	text-shadow: 0px 0px 10px #fff;
	color: transparent;
}
.bmenu li a:hover{
	background: transparent;
	text-shadow: 1px 1px 10px rgba(71,80,23,0.6);
	color: #c4d85a;
}

例子7(Example 7)

In the last experiment we’ll make the whole menu look like a circle by adding a border radius with the value of half of the menus width/height:

在上一个实验中，我们通过添加边框半径作为菜单宽度/高度的一半来使整个菜单看起来像一个圆形：

.bmenu{
	padding: 50px 0px;
	margin: 0 auto;
	position: relative;
	background: rgba(0,0,0,0.7);
	width: 500px;
	height: 400px;
	-webkit-border-radius: 250px;
	-moz-border-radius: 250px;
	border-radius: 250px;
	-webkit-transition: background-color 0.5s ease-in-out;
	-moz-transition: background-color 0.5s ease-in-out;
	-o-transition: background-color 0.5s ease-in-out;
	-ms-transition: background-color 0.5s ease-in-out;
	transition: background-color 0.5s ease-in-out;
}

We’ll add the transitions here because we want to animate the background color when we enter into the menu. We’ll make it more transparent by using rgba values:

我们将在此处添加过渡效果，因为我们要在进入菜单时为背景色设置动画。 我们将使用rgba值使其更加透明：

.bmenu:hover{
	background: rgba(0,0,0,0.2);
}

We’ll adjust the font size and the line height of the list element a bit:

我们将稍微调整列表元素的字体大小和行高：

 
.bmenu li{
	font-size: 40px;
	display: block;
	line-height: 66px;
}

The elements will be scaled down and blurred:

元素将按比例缩小和模糊化：

 
.bmenu li a{
	white-space: nowrap;
	color: transparent;
	display: block;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0px 0px 3px #fff;
	letter-spacing: 1px;
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	-webkit-transform: scale(0.8); 
	transform: scale(0.8);
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
}

Hovering over the menu will also make the elements more blurry and give the currently hovered one a nice background color while crisping it up and scaling it to its original size:

将鼠标悬停在菜单上还将使元素更加模糊，并为当前悬停的元素提供一种不错的背景色，同时将其变脆并缩放为其原始大小：

 
.bmenu:hover li a{
	text-shadow: 0px 0px 10px #fff;
}
.bmenu li a:hover{
	text-shadow: none;
	color: #fff;
	background: rgba(129,6,29,0.8);
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	-webkit-transform: scale(1); 
	transform: scale(1); 
}

Remember, IE is the party pooper here, but if you’d like to try your luck and use IE’s proprietary shadows, check out the following resources and go wild: CSS Blurred Text-Shadow in IE — Part I IE Visual Filters and Transitions Reference: Static Filters

请记住，IE在这里是聚会中的佼佼者，但是如果您想试试运气并使用IE的专有阴影，请查看以下资源并疯狂使用： IE中CSS模糊文本阴影-第一部分IE视觉过滤器和过渡参考：静态过滤器

And that’s it! What’s your favorite one? I hope you like these experiments and find them inspiring!

就是这样！ 你最喜欢哪一个？ 希望您喜欢这些实验，并发现它们对您有所启发！

翻译自: https://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/

用css3过渡实现三级菜单