fiddle

Question

我正在尝试在我的网站上实现一个CSS3动画，其中2个div将一起挤压另一个带有背景图像的div。这很难解释，所以我做了quick video。请注意，此视频中包含我要解决的问题。

我想做的是当动画div的高度时，它不会缩小到它的水平中心而不是它的顶部。这可以用任何方式完成吗？

我的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>

请查看jsFiddle示例以获取完整代码。

jsFiddle code

jsFiddle Full Screen Result

Answer 1

参见此演示

fiddle

CSS是：

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

诀窍是修改高度，同时更改边距顶部，使中心停留在同一个位置。同时也改变背景位置。

我已经完成了这个效果，因为这是我在视频中看到的，即使你的问题似乎要求背景缩小。如果你想要的是后者，请说出来。

Answer 2

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

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

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

将div缩小到水平中心

2 个答案:

fiddle