Question

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

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

我不介意将背景设置为图像或使用边框来指示颜色。基于我在这里所做的事情，我想象设置悬停效果的背景图像，并且正常状态是最简单的。我希望背景图像在悬停时转换为新的图像，但是要从中心扩展而不是从左到右，或从右到左。

这是我可以通过CSS Transitions或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

从中心扩展背景（CSS / Javascript）

1 个答案: