如何使用CSS创建交互式循环链接

Question

我希望做类似的事情， http://timheuer.com/blog/archives.aspx 我需要使用CSS创建一个交互式循环链接。

Answer 1

有很多方法可以达到这种效果。有问题的页面看起来只是简单地使用css样式的图像背景。最简单的例子是;

1图像背景

#link1 {
    background-image: url('/images/button1-trans.png')
}

#link2 {
    background-image: url('/images/button2-trans.png')
}

#link1:hover {
    background-image: url('/images/button1.png')
}

#link2:hover {
    background-image: url('/images/button2.png')
}

1b Image Spriting

使用多个图像需要多个浏览器请求，因此“图像精灵”是一种常用的技术，可以将下载优化为单个请求，然后将其缓存，从而产生单个304响应。在Tim的案例中，他看起来像这样（虽然原件是透明的）;

然后为每个链接使用相同的图像以及剪切和偏移来定位图像的适当部分;

#links a {
    background-image:url('/images/allButtons.png')
    background-position: 0px 0px; /* sets the row for all normal links */
    width: 64px;
    height: 64px; /* bounding box for the image */
}

#links #link1 {
    background-position: 0px 0px; /* first icon on the first row */
}
#links #link2 {
    background-position: -64px 0px; /* slides the image strip left to locate the second icon on the first row */
}
#links #link1:hover {
    background-position: 0px -64px; /* first icon on the second row */
}
#links #link2:hover{
    background-position: -64px -64px; /* second image, second row */
}

注意#links a中的背景图片？嗯，在这种情况下实际上是多余的，但如果你能做到这一点会很好，然后你只需要在每个图标中使用background-position-x，你只需要一个#links a:hover来设置使用background-position-y:-64px的常见行，但FireFox团队使用他们通常的迂腐标准 - 只有'计算机拒绝'方法决定不支持background-position-x或y，即使每个其他浏览器都有，并且它是常用的。让每个想以这种方式使用它的人都感到懊恼。

但是，请放大您链接到的博客上的那些按钮。看看它们看起来像是像素化了吗？

2纯CSS

您可以至少使用CSS border-style，border-width和border-radius的组合来实现圈子，就像其他人发布的那样，但您仍然需要中心按钮的图像。

3个图标字体

☺☻☼☽☾☿

这是最现代化的，也是我首选的方法，因为它完全可扩展，透明，非常小，超快。你需要下载你的字体，但SVG压缩得非常好。它只是HTML中的文本，根本没有图像。也没有疯狂的CSS样式。结帐IcoMoon！看看你如何可以放大这些？

放大上面的图标，这是fiddle

你可以免费使用icoMoon，但我已经购买了pro pack，它的价格实惠且价值非常值得。这是一个很棒的网站，你甚至可以加载你自己的SVG图标，它会为你生成自己的字体。甚至还有IE6的支持。

Answer 2

<强>说明

您向我们展示的页面使用图像sprit与所有菜单项的图标，带边框的事件。我的例子展示了如何使用简单的css。您也可以使用图片sprit，但仅包括图标。

HTML CODE：

<ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Blog</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
    <li><a href="#"><span>About</span></a></li>
    <li><a href="#"><span>Projects</span></a></li>
</ul>

CSS代码

html, body {
    background: #369BD7;
    font-family: tahoma;
    font-size: 12px;
}

a {
    color: #fff;
}

ul {
    clear:both;
    margin: 0; 
    padding: 0;
}

ul li {
    display:block;
    position: relative;
    float: left;
    height: 80px;
    width: 80px;
    padding: 0;
    margin-left: 10px;
    list-style: none;
    text-align: center;
    white-space: nowrap;
}

ul li:first-child {
    margin: 0;
}

ul li a {
    display:block;
    margin: 10px auto;
    height: 40px;
    width: 40px;
    border-radius: 100%;
   -webkit-border-radius: 100%; 
   -moz-border-radius: 100%;  
    border: 4px solid #fff;
    -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;
    background: transparent url('http://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/home.png') no-repeat 50% 50%;
}

ul li a:hover {
    background-color: #fff;
} 

ul li a span {
    display: block;
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    text-align: center;
    z-index: 1;
}

BORDER RADIUS浏览器支持

http://caniuse.com/#search=border-radius

<强>样本

http://jsfiddle.net/bartekbielawa/fgPf8/6/

Answer 3

诀窍是让border-radius成为height和width的一半。然后使用gif或png进行IE后备。

.round-button {
  width:100px;
  height:100px;
  border-radius:50px; /* be sure to add all the browser prefix versions */
}