Expand background from center (CSS / Javascript)

问题

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!

回答1:

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

来源：https://stackoverflow.com/questions/16147319/expand-background-from-center-css-javascript

标签

jquery

css

css-transitions