如何使用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图片精灵

使用多个图像喜欢需要多个浏览器的请求，以便“图片组合”是常用的技术，这些天到下载优化成单个请求然后将被缓存，导致一个单一的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图标字体

＆＃x263a;＆＃x263b;＆＃x263c;＆＃x263d;＆＃x263e;＆＃x263f;

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

放大上方的图标，并且这里有一个fiddle

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

Answer 2

诀窍是让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 */ 
} 

Answer 3

说明

页你告诉我们，使用图像精神与所有菜单项的图标，事件与边界。我的例子显示如何用简单的CSS。你也可以使用图片精灵，但只包括图标。

HTML代码：

<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; 
} 

圆角半径的浏览器支持

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

DEMO

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