Question

我正在进行有关CSS 3动画的练习。我坚持如何保持项目全速下降页面，而无需用户使用鼠标跟随它而无需借助javascript。所以当你将鼠标悬停在盒子上时，盒子就会掉下来。

这是我的代码：

<p class="exp9"><strong>box</strong></p>

strong {
    margin-top: 20em;
}

p:hover strong {
    display: block;
}

p:hover strong:hover {
    margin-top: 20em;
}

我的代码只是让文本框内的文字下拉。任何的想法？谢谢

Answer 1

使用此

/*newly added items start faded out and translated 400px upwards on the y-axis*/
li.new-item {
    opacity: 0;
    animation: new-item-animation .3s linear forwards;
}

@keyframes new-item-animation {
    from {
        opacity: 0;
        transform: translateY(-400px);
}

    to {
        opacity: 1;
        transform : translateY(0);
    }
}

Answer 2

以下是您可以执行的操作示例：

<div class="box">
    <p class="innerbox">
        Hover
    </p>
</div>

CSS：

.innerbox
{
    Width:150px;
    height:20px;
    background-color: lightBlue;
    Text-align: center;
    Padding:10px 0px;
}

.box
{
    Display:inline-block;
    Transition: 0.3s 0s All linear;
}

.box:hover
{
    Padding-top:20em;
}

在HTML的上下文中：

strong 
{
    Text-align: center; /* this makes it more aesthetic */
    Padding:10px 20px; /* this makes the text more easy to hover over */

}

p
{
    Display: inline-block; /* this is so the box doesn't stretch the width of the page */
    Transition: 0.3s 0s all linear;
}

p:hover
{
    padding-top: 20em;
}

如何使用css3动画使项目失效

2 个答案: