有没有一种方法可以让CSS动画以对角线方式运行？

Question

我制作了一个 CSS 动画，可以使文本呈现出闪光效果。但是目前的动画只适用于水平方向。我想知道是否有一种方法可以改变动画方向，使其看起来像真实的对角线闪光？

这是我的当前代码：

h1 {

font-family: 'BebasRegular', sans-serif;
font-size: 150px;
padding-bottom: 100px;
padding-top: 50px;
background: #E9AB17 -webkit-gradient(linear, left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat;
-webkit-background-size: 155px;
color: rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;
-webkit-animation-name: shine;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;    
}

@-webkit-keyframes shine
{
0%
{
background-position: top left;
}
28%,100%
{
background-position: top right;
}
}

- fabregilkas

Answer 1

试试这个：

@keyframes shine {
    0% {
        transform: translatex(0px) translatey(0px)
    }
    100% {
        transform: translatex(100px) translatey(100px);
    }
}

jsFiddle

MDN translate documentation

- apaul

Answer 2

您可以在结束位置将“top”更改为“bottom”：

@-webkit-keyframes shine
{
0%
{
background-position: top left;
}
28%,100%
{
background-position: bottom right;
}
}

然而，很可能效果不会太明显。原因是这是一个块级元素，很可能在文本结束之后向右延伸得很远。因此，对角线相当平坦。您可以通过删除

来检查此内容。

-webkit-background-clip: text;

属性; 现在你会看到所有的h1和背景移动。

要使其更“斜”，需要使其更少“宽”; 最简单的方法可以只指定一个宽度。

此外，如果想要产生闪光效果，我会选择径向渐变而不是线性渐变。如果您不知道，请查看colorzilla并选择辐射方向

顺便说一句，你的问题听起来很熟悉 :-)

- vals