Question

我正在尝试模仿这个动画的加载功能，所以我希望动画的结束点是浏览器的右上角。

我该怎么做？即什么可以取代“left：1000”，始终是浏览器的右上角。

.square {
    width: 30px;
    height: 3px;
    background: red;
    position: relative;
    animation: colors 2s;
    -webkit-animation: colors 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes colors {
    0% {
        left: 0px;
        top: 0px;
    }

    99% {
        left: 1000px;
    }
}

@-webkit-keyframes colors {
    0% {
        left: 0px;
        top: 0px;
    }

    99% {
        left: 1000px;
    }
}

Answer 1

position:absolute;和right:0会将您带到浏览器的右边缘。

.square{
    position:absolute;
}

@keyframes colors{
    from{
        left:0;
        top: 0px;
    }

    to{
        right:0;
    }
}

Answer 2

解决方案是同时使用left和margin-left

JSFIDDLE DEMO

.square
{
    width: 30px;
    height: 3px;
    background: red;
    position: relative;
    animation: colors 2s;
    -webkit-animation: colors 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    top: 0px;
    margin-left:-30px;
}

@keyframes colors {
    0% {left: 30px;}
    99% { left: 100%;} 
}

@-webkit-keyframes colors {
    0% {left: 30px;}
    99% { left: 100%;} 
}

Answer 3

运行此功能后，我假设您正在尝试像YouTube上的加载栏一样。如果是这样，请尝试将此行添加到“.square”类。

top: 0px;

然后删除“相对”定位，并将其更改为“固定”。

希望有所帮助，但可能与您的问题无关。

如何使CSS动画终点成为浏览器的右边缘

3 个答案: