从中心展开背景(CSS/Javascript) [英] Expand background from center (CSS / Javascript)

问题描述

请注意，以下示例将自动播放音乐！如果您希望使扬声器静音，请在访问示例之前将其静音.

我正在重建此站点，该站点最初是在Flash中完成的.基本上在Flash网站上，有5个主要按钮，发现"，体验"，居住"，互动"和连接".当您将鼠标悬停在这些按钮上时，背景会随着底部边框从中心向外扩展而略有变化.

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

这是我可以通过CSS Transitions还是jQuery完成的事情?

谢谢！

解决方案

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

Please note the example below has music play automatically! If you wish to mute your speakers, please do so before accessing the example.

I'm recreating this site which was originally done in flash. Basically on the flash site, there are 5 main buttons, 'Discover', 'Experience', 'Reside', 'Interact', and 'Connect'. When you hover these buttons, the background changes slightly as the bottom border expands out from the center.

I wouldn't mind setting the background as an image or using a border to indicate the color. Based on what I'm doing here, I imagine setting the background image for the hover effect and the normal state is easiest. I'd like for the background image to transition into the new one on hover but to have it expand from the center rather than left to right, or right to left.

Is this something I can do via CSS Transitions or jQuery?

Thanks!

解决方案

Using CSS transitions you can do this quite nicely.

You could use HTML as follows

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

and the following CSS would animate the red line when you hover over the container box

.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;
}

Try it out here: http://jsfiddle.net/SNzgs/1/

Browser support should be as follows: Chrome 1.0, Safari 3.2, Firefox 4.0, IE 10, Opera 10.5

这篇关于从中心展开背景(CSS/Javascript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！