Question

我试图制作动画，其中div改变了颜色＆＃34;其中的内容也是如此。动画中的不同阶段如下所示。您在图像中看到的div在视图中看起来像这样。我将类命名为row1，因为当我使用＆＃34; row＆＃34;我意识到引导程序可能会弄乱一些东西。

<div class="row1 facebook">
    <div class="logo">
        <div class="image"></div>
        <label class="text">facebook</label>
    </div>
</div>

我试图使用2个div，其中底部是带有白色背景的那个，顶部是带有颜色的那个，在开头是0px然后逐渐增加宽度有溢出-x：隐藏，但我遇到了问题，因为我试图保持内容居中，以便内容在调整大小时保持移动。

stage 1

stage 2

stage 3

2 colors of logo and text

Answer 1

演示：http://jsfiddle.net/6tneqpa5/2/

说明：我使用jquery来设置内部div的宽度并将其定位为绝对值。虽然仅使用css移动它的父div，但这会导致它剪切它的子元素。

我添加了更多动画，这不是你要求的，但我想这应得的。

代码：

Js

$('.main').width($('.out').width());
$(window).resize(function(){
    $('.main').width($('.out').width());
});

CSS

* {    padding: 0; margin: 0;}
.out {
    height: 180px;
    font-family: "Helvetica";
    font-size: 0;
    cursor:pointer;
    position: relative;
    overflow: hidden;
}

.bg, .top {
    font-size: 1rem;
    height: 180px;
    text-align: center;
    line-height: 170px;
}
.bg {
    background: radial-gradient(circle at center, #ffffff 0%,#ffffff 59%,#ededed 100%);
}

.top, .main {
    position: absolute;
    right: 0; top: 0; 
    overflow: hidden;
}
.top {
    width: 0;
    -webkit-transition: all .5s;
}
.out:hover .top {
    width: 100%;
}
.main {
    background-color: #f53f39;
    color:white;
}

Answer 2

你需要设置主容器，动画背景，然后是徽标。

<div id="container">
     <div id="animated">
     </div>
     <div id="logo">
     </div>
</div>

<强> This is a link to jsfiddle

Answer 3

这样的事情：

<强> HTML：

<div class="container">
    <div class="hover">
        <div>Facebook</div>
    </div>
    <div class="default">
        <div>Facebook</div>
    </div>
</div>

用户输入容器后，我们使用jQuery为 .default 元素设置动画，将宽度设置为等于0（零）。

<强> JS：

$(".container").on({
    "mouseenter" : function() {
        $(".default", this).stop().animate({
        width: "0%",
        }, 700, function() {
            $("div", this).hide();
        });
    },
    "mouseleave" : function() {
        $(".default div", this).show();
        $(".default", this).stop().animate({
        width: "100%",
        }, 700);
    }
});

.default 中的 DIVs 和 .hover 应根据其父母大小进行定位，设置位置属性为绝对。这样，即使父级宽度发生变化，元素也会保持其位置。

有关详细信息，请查看此FIDDLE，您将看到我如何使用CSS和jQuery定义每个元素的大小及其位置。

使居中内容动画化div - 从右到左逐渐显示顶部

3 个答案: