css滚轮_如何创建CSS3滚轮菜单

css滚轮

没有比学习实际项目更好的学习CSS3的方法了，这正是我们要做的。 我将教你如何使用一些初学者到高级CSS技术来创建一个很棒的，分层CSS3轮菜单。 因此，断开您喜欢的文本编辑器或IDE，让我们开始使用CSS3魔术吧！

今天，您将学习如何从可用的多种不同样式和颜色中创建出甘蔗泪滴。 您将在源文件中收到所有变体。 另外，作为一个额外的奖励，我添加了一些可选的Javascript，以便您可以根据悬停的菜单项旋转图像。 源文件甚至带有其自己的文档！

注意：目前，对IE的支持是有限的。 我们将主要通过使用CSS3中可以做的事情来达到这个目的……但是，与所有处于实用性边缘的事物一样，这意味着牺牲了一点稳定性。 不过，我们将在本教程的结尾处解决IE主题！

---

视频教程

我们今天以两种不同的格式提供本教程：视频和下面的完整书面教程。 按照您喜欢的学习方法（或两者都学习），我们将立即为您服务！

---

书面教程

下面是逐步编写的教程。 确保也获取完整的可下载源！

---

步骤1：图层

我们要做的第一件事是创建一些层，这些层将相互重叠并保留在原位，同时使用尽可能少的代码。 重要的是不要让您的代码充满很多膨胀，也不要创建太多
不必要的浮点数或绝对定位的元素，因此我们将尽量保持相对。

代码：

<!-- the layers !-->
<div id="menu-wrap">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<div class="wrap4"> 
<!-- center image goes here !-->
<div class="completer"></div>
<div class="completer2"></div>
<div class="wrap5">
<div class="nav-holder">

<!-- this space will be used for the menu !-->

</div><!-- nav holder !-->
</div><!-- wrap5 !-->
</div><!-- wrap4 !-->
</div><!-- wrap3 !-->
</div><!-- wrap2 !-->
</div><!-- wrap1 !-->
</div><!-- menu-wrap !-->

如您所见，该代码非常简单。 我们基本上将一层堆叠在另一层之上，这样他们就可以保持自己的位置。

接下来，我们要在轮的中心添加一个图像，或者在这种情况下添加泪滴。 为此，我们只需在wrap4类和completer类之间添加以下代码。 这会将图像锁定在画布的中心。 我们将为此使用一个Rockable图像，因为它们很棒！

<span class="img1"><img class="orbit orbit-frame" src="images/card18.jpg" alt="card08" /></span>

现在，我们要为每一层添加一些样式。

＃menu-wrap：

这将是滚轮菜单的主要容器。 它还包含影响div id =“ menu-wrap”内部任何内容的所有通用字体和字体大小。

#menu-wrap{
	background:#e7e7e7; /* This isn't needed */
	height:600px; /* This is important and keeps the wheel in place when hovering over elements */
	font-family:sans-serif, Franklin Gothic Medium,Helvetica, Arial; /* If not using Franklin, it will automatically go to the next font in the family */ 
	font-size:14px; /* Establishes the global font size */
	letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */
	}

我们将继续进行操作，并通过使用边距将其放置在车轮的中心，并为其添加一些尺寸和边框来确保正确设置中心图像的样式。

#menu-wrap .orbit{
	height: 210px;
    margin: 32px; /* Pushes the images in the display to the center */
    position: absolute; 
	width: 210px;
	}
	
#menu-wrap .orbit-frame{
	border:2px solid #999; /* Creates a division between the image and wrap5 */
	}

所有包装器：我们希望通过添加通用边框半径，将它们全部置于中心，添加相对位置以使所有内容都包含在内并将其向下压以使其均匀，从而创建适用于所有主包装器的某些样式影响。

.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{  /* styles all of the wheel containers */
	-moz-border-radius: 220px 0 200px 220px;  /* firefox */
	-webkit-border-radius: 220px 0 200px 220px; /* webkit */
	border-radius: 220px 0 200px 220px;   /* opera */
 	margin:0 auto; /* centers all the wrappers relative to each other */
	position:relative !important;  /* Do not touch unless you know what you are doing */ 
	top:20px;
	}

.wrap1：

这是您位于其他所有对象之后的最大层。 我们将创建渐变红色背景，并对较旧的浏览器使用纯红色后备。 我们还将使用CSSpie告诉IE可以使用这些样式。 之后，我们要做的就是添加一个宽度和高度，然后就完成了。 您要确保宽度和高度大于所有其他图层，以便显示在它们后面。

.wrap1{ 
	background: #FF0000; /* old browsers */
	background: -moz-linear-gradient(top, #FF0000 0%, #990000 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(100%,#990000)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#990000',GradientType=0 ); /* ie */
	background: linear-gradient(top, #FF0000 0%, #990000 100%); /*future CSS3 browsers*/
	-pie-background: linear-gradient(top, #FF0000 0%, #990000 100%); /*IE fix using Pie*/
	height:394px; 
	width:394px;
	}

.wrap2：

现在，对于自动换行2，