Question

当我打开页面时，我的文字出现在屏幕中间的动画（我使用“animate.css”）然后我想让它移动到屏幕的顶部，无论屏幕尺寸是多少。有没有办法做到这一点？

我如何以文本div为中心;

.center {

        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0px;
        left: 0;
        width: 100%;
        height: 170px;
        background-color: red;

    }

我的动画技巧; （而不是底部：300px，我希望它转到页面顶部。）

.center:hover {

        -webkit-animation: animationShrink 2s 1 ease forwards;

    }

    .container:hover {

        -webkit-animation: animationUp 2s 1 ease forwards;

    }

    @-webkit-keyframes animationShrink {

        from {

            font-size: 1em;

        }
        to {

            font-size: 0.6em;

        }

    }

    @-webkit-keyframes animationUp {

        from {

            bottom: 0px;

        } to {

            bottom: 300px;

        }

    }

感谢。

Answer 1

HTML：

<a class='center'>Text</a>

CSS：

.center {
    position: absolute;
    left: 0;
    top: calc(50vh - (170px / 2));
    width: 100%;
    height: 170px;
    background-color: red;
    -ms-transition: top 1s linear;
    -moz-transition: top 1s linear;
    -o-transition: top 1s linear;
    -webkit-transition: top 1s linear;
    transition: top 1s linear;

}

.center:active {
    top: 0;
    -ms-transition: top 2s linear;
    -moz-transition: top 2s linear;
    -o-transition: top 2s linear;
    -webkit-transition: top 2s linear;
    transition: top 2s linear;
}

例如检查这个plunker： https://plnkr.co/edit/GvH176vMGKSD47VrleXQ?p=preview

我使用伪类“active”来启动动画（例如，通过点击元素激活）。此代码应为您提供良好的自定义基础。

如何为文本设置动画，使其在CSS中显示在屏幕顶部？

1 个答案: