从中心展开背景（CSS / Javascript）答案

【问题标题】：Expand background from center (CSS / Javascript)从中心展开背景（CSS / Javascript）
【发布时间】：2013-04-22 21:23:41
【问题描述】：

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

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

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

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

谢谢！

【问题讨论】：

是的。您可以使用 CSS3 过渡和/或 jQuery 来实现。
嘿乍得！您介意提供一个示例或网站来说明如何使用 CSS 过渡从中心扩展它吗？
一个声音警告会很好！热门提示：除非您希望每个人在工作时间访问该网站时都放弃它，否则请摆脱它。
到目前为止，您尝试过什么布赖恩？向我们展示一些代码开始，我很少在这个网站上从头开始写东西。
你好。很抱歉——我刚刚添加了警告。

标签： jquery css css-transitions

【解决方案1】：

使用 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

【讨论】：