1

请注意，下面的示例会自动播放音乐！如果您希望将扬声器静音，请在访问示例之前执行此操作。

我正在重新创建这个最初是在 Flash 中完成的网站。基本上在快闪网站上，有 5 个主要按钮，“发现”、“体验”、“驻留”、“互动”和“连接”。当您悬停这些按钮时，背景会随着底部边框从中心向外扩展而略有变化。

我不介意将背景设置为图像或使用边框来指示颜色。根据我在这里所做的，我想为悬停效果和正常状态设置背景图像是最简单的。我希望背景图像在悬停时过渡到新的图像，但要让它从中心而不是从左到右或从右到左展开。

这是我可以通过 CSS 过渡或 jQuery 完成的吗？

谢谢！

4

1 回答 1

0

使用 CSS 过渡，您可以很好地做到这一点。

您可以按如下方式使用 HTML

<div class="container">
    <span class="greyline">
        <span class="redline"></span>
    </span>
</div>

当您将鼠标悬停在容器框上时，以下 CSS 将为红线设置动画

.container {height:100px;width:200px;background:#eee;position:relative;}
.container span {display:block;}
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:0;}
.redline {background:red;height:10px;width:0;margin:auto;}
.container:hover .redline {
    width:200px;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

在这里试试：http: //jsfiddle.net/SNzgs/1/

浏览器支持如下：Chrome 1.0、Safari 3.2、Firefox 4.0、IE 10、Opera 10.5

于 2013-04-22T13:09:57.670 回答