从中心展开背景(CSS / Javascript)

Question

请注意下面的例子是自动播放音乐的!如果您希望将您的扬声器静音，请在访问示例之前这样做。

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

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

这是我可以通过CSS过渡或jQuery吗?

谢谢!

Answer 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