0

テキストをアニメーション化して光沢効果を与える 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;
}
}
4

2 に答える 2

3

これを試して：

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

jsフィドル

MDN 翻訳ドキュメント

于 2013-05-14T16:17:15.933 に答える
1

終了位置で上から下に変更できます。

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

ただし、ほとんどの場合、その効果はほとんど目立ちません。その理由は、これがブロック要素であり、おそらくテキストの終わりをはるかに超えて右に伸びているからです。したがって、対角線は非常に平らです。これを削除して確認できます

-webkit-background-clip: text;

財産; すべての h1 と背景の動きが表示されます。

より「斜め」にするには、「より広く」する必要があります。簡単な方法は、幅を指定することです。

また、輝き効果を作りたい場合は、線形ではなく放射状のグラデーションを選択します。わからない場合は、colorzillaを確認し、向きでradialを選択してください

ところで、あなたの質問は私にはよく知られているように聞こえます:-)

于 2013-05-14T21:00:08.330 に答える