Question

我在标签中创建了一个带有两个单词消息的临时页面。对于阴影动画，h1具有css3无限过渡。

阴影对于所有方面都是可见的，但没有过渡。每次持续时间都会突然改变阴影。

如果你仔细看到阴影，那么你会发现阴影不是动画。阴影突然切换，没有动画从上到右，从右到下，从下到左，再从左到上。

我只是试图在所有方面移动阴影。

请看我的小提琴：

CSS：

h1 {
    color: #ffffff;
    vertical-align: middle;
    height: 100%;
    display: table-cell;
    font-size: 5em;
    text-align: center;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    animation: message 3s infinite;
    -webkit-animation: message 3s infinite;
}
@keyframes message {
    25% {
        text-shadow: 1px 0 3px rgba(0, 0, 0, 0.3);
    }
    50% {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    75% {
        text-shadow: -1px 0 3px rgba(0, 0, 0, 0.3);
    }
    100% {
        text-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15);
    }
}
@-webkit-keyframes message {
    25% {
        -webkit-text-shadow: 1px 0 3px rgba(0, 0, 0, 0.3);
    }
    50% {
        -webkit-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    75% {
        -webkit-text-shadow: -1px 0 3px rgba(0, 0, 0, 0.3);
    }
    100% {
        -webkit-text-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15);
    }
}

HTML：

<div class="container">
    <h1>Coming Soon&hellip;</h1>
</div>

Answer 1

不确定具体是什么意思，但请注意，如果您有-webkit-animation，则还需要@-webkit-keyframes

CSS Transition无法完美运行

1 个答案: