我制作了一个 CSS 动画,它可以为文本添加动画效果,使其具有闪耀效果。该效果目前仅适用于水平。我想知道有没有一种方法可以改变动画的方向,使它看起来像一个逼真的对 Angular 线闪光?
这是我当前的代码:
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;
}
}
最佳答案
试试这个:
@keyframes shine {
0% {
transform: translatex(0px) translatey(0px)
}
100% {
transform: translatex(100px) translatey(100px);
}
}
关于css - 有没有办法让 CSS 动画对 Angular 线工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16546350/