有没有办法让 CSS 动画对角线工作？答案

【问题标题】：Is there a way to make CSS animation work diagonally?有没有办法让 CSS 动画对角线工作？
【发布时间】：2013-05-15 05:08:42
【问题描述】：

我制作了一个 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;
}
}

【问题讨论】：

标签： css css-animations

【解决方案1】：

试试这个：

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

jsFiddle

MDN translate documentation

【讨论】：

【解决方案2】：

您可以在结束位置从上到下更改：

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

但是，很可能效果不会很明显。原因是这是一个块元素，很可能它向右延伸到远远超出文本的末尾。所以，对角线是相当平坦的。你可以检查这个删除

-webkit-background-clip: text;

属性；您现在将看到所有的 h1 和背景移动。

要让它更“对角线”，你需要让它不那么“宽”；更简单的方法可能是指定一个宽度。

另外，如果你想制作发光效果，我会选择径向渐变而不是线性渐变。如果您不知道，请检查colorzilla 并在方向选择径向

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

【讨论】：

再次感谢您的帮助，非常感谢。