Wix CSS - ホログラフィックシマー効果

.cssチュートリアル{

背景: 線形グラデーション(45度, #ff6ec7, #ff9a56, #ffcd3c, #a8e6cf, #88d8c0, #c7ceea, #ff6ec7);

背景サイズ: 400% 400%;

背景クリップ: テキスト;

-webkit-background-clip: テキスト;

-webkit-text-fill-color: 透明;

色: 透明;

アニメーション: ホログラフィック シマー 3 秒のイーズインアウト 無限;

位置: 相対的;

}

.css-tutorial::before {

コンテンツ: attr(データテキスト);

位置: 絶対;

上: 0;

左: 0;

背景: 線形グラデーション(45度, #ff6ec7, #ff9a56, #ffcd3c, #a8e6cf, #88d8c0, #c7ceea, #ff6ec7);

背景サイズ: 400% 400%;

背景クリップ: テキスト;

-webkit-background-clip: テキスト;

-webkit-text-fill-color: 透明;

色: 透明;

アニメーション: ホログラフィック シマー 3 秒のイーズイン アウト 無限反転。

フィルター: ぼかし(1px);

不透明度: 0.7;

}

@keyframes ホログラフィックシマー {

0%、100% {

背景位置: 0% 50%;

フィルター: hue-rotate(0deg);

}

25% {

背景の位置: 50% 100%;

フィルター: 色相回転(90度);

}

50% {

背景の位置: 100% 50%;

フィルター: 色相回転(180度);

}

75% {

背景位置: 50% 0%;

フィルター: 色相回転(270度);

}

}