Question

我将动画文字设置到屏幕的每个角落。在每个角落，文本都会旋转。这里的问题是在右上角和左下角，文本离开屏幕。我认为它与旋转有一些关系。

我的问题是如何在屏幕上保留正确位置的全文？

#lorem {
    font-size: 50px;
    color: red;
    position: absolute;
    top: 5%;
    left: 5%;
    animation: switch 10s linear infinite;
}
@keyframes switch {
    0% {
        bottom:auto;
        top:3%;
        left: 3%;
        right: auto;
        animation-timing-function: steps(1, end);
    }
    25% {
        left:auto;
        right:3%;
        bottom: auto;
        top: 3%;
        animation-timing-function: steps(1, end);
        transform: rotate(90deg);
    }
    50% {
        top:auto;
        bottom:3%;
        right: 3%;
        left: auto;
        animation-timing-function: steps(1, end);
        transform: rotate(180deg);
    }
    75% {
        right:auto;
        left:3%;
        top: auto;
        bottom: 3%;
        animation-timing-function: steps(1, end);
        transform: rotate(-90deg);
    }
}

<span id="lorem">Lorem</span>

Answer 1

将你的变换改为25％

transform: rotate(90deg) translate(50px,0px);

和75％

transform: rotate(-90deg) translate(50px,0px);

fiddle

CSS动画/转换关闭屏幕

1 个答案: