0

I am trying to implement a CSS3 animation on my site where 2 divs would squeeze together another div with a background image. It's pretty hard to explain, so I made a quick video. Please note that the problem I want to solve is present on this video.

What I'd like to do is when animating the height of a div, it wouldn't shrink to it's horisontal center instead of it's top. Can this be done in any way?

My HTML:

<div id="container">
    <div id="top-bar">
        <ul id="nav">
            <li><a href="index.php">Főoldal</a>
            </li>
            <li><a href="szolgaltatasok.html">Szolgáltatások</a>
            </li>
            <li><a href="portfolio.php">Portfólió</a>
            </li>
            <li><a href="kapcsolat.html" id="kapcsolat">Kapcsolat</a>
            </li>
        </ul>
    </div>
    <div id="content">
        <div id="card">
            <!-- The orange card : irrelevant -->
        </div>
        <div id="main">
            <div id="inner-content"></div>
        </div>
    </div>
    <div id="bottom-bar">
        <div id="logo">
            <!-- Logo Image -->
        </div>
    </div>
</div>

Please check the jsFiddle examples for the full code.

jsFiddle code

jsFiddle Full Screen Result

4

2 回答 2

1

See this demo

fiddle

The CSS is:

div {
    width: 200px;
    position: absolute;
}
.mid {
    background: url("http://placekitten.com/200/300");
    height: 200px;
    top: 100px;
    -webkit-transition: all 2s;
    transition: all 2s; 
}

.top {
    top: -100px;
    height: 100px;
    background-color: gray;
}

.bottom {
    bottom: -100px;
    height: 100px;
    background-color: gray;
}

.mid:hover {
    height: 0px;
    margin-top: 100px; 
    background-position: 0px -50px;
}

The trick is to modify the height, and at the same time change the margin-top so that the center stays at the same place. And at the same time change the background position, also accordingly.

I have done this effect because this is what I saw in the video, even though your question seems to ask for the background shrinking. If what you want is the later, please say so.

于 2013-06-27T20:28:43.590 回答
1

我在这里创建了一个小提琴。每次单击按钮时，它都会添加/删除具有缩放变换的类。

CSS：

.box {  
    width: 300px;  
    height: 300px;  
    background: black;
    -webkit-transition: all .6s ease-in-out; 
    transition: all .6s ease-in-out;;  
}  

.box-change {  
    -webkit-transform: scale(0,0); 
}

JS：

$(function() { 
     $("#bt").click(function() {  
         $(".box").toggleClass("box-change");  
         }); 
    });

HTML：

<div class="box"></div> 
<input type="button" value="Let's Do This Thing" id="bt">

您可以将 CSS 更改为：

.box-change {  
    -webkit-transform: scale(1,0); 
}

用于缩小到“水平中心”效果。

于 2013-06-27T20:37:13.517 回答