2

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

4

3 回答 3

3

有多种方法可以达到这种效果。有问题的页面看起来只是使用 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 响应。在蒂姆的情况下，他的样子是这样的（虽然原件是透明的）；

在此处输入图像描述

然后，您对每个链接使用相同的图像以及剪辑和偏移来定位图像的适当部分；

#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！看看你怎么能一直放大这些？

放大上面的图标，这是一个小提琴

您可以免费使用 icoMoon，但我已经购买了专业包，它的价格公道而且物有所值。这是一个很棒的网站，因为您甚至可以加载自己的 SVG 图标，它会为您生成自己的字体。甚至还有 IE6 支持。

于 2013-04-20T13:15:02.510 回答
1

解释

您向我们展示的页面使用带有所有菜单项图标的图像精灵，带有边框的事件。我的示例展示了如何使用简单的 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

演示

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

于 2013-04-20T07:36:08.237 回答
0

诀窍是拥有and的border-radius一半。然后只需使用 gif 或 png 作为 IE 后备。heightwidth

.round-button {
  width:100px;
  height:100px;
  border-radius:50px; /* be sure to add all the browser prefix versions */
}
于 2013-04-20T02:22:14.327 回答