浏览器支持应如下: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)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
