部分用于測試,部分用于我的設計理念,我試圖將動畫gif轉換為純動畫CSS.

它幾乎正常工作,但我遇到了障礙,我不確定是什么導致了我的問題,或者我如何解決它.我不幸地懷疑我只是限制了技術.

至于實際的CSS,我一直在嘗試實現這里的方法(動畫框陰影屬性),因為它看起來最可行：https://codepen.io/andrewarchi/pen/OXEEgL

#ash::after {

animation: ash-frames 0.4s steps(1) infinite;

}

@keyframes ash-frames {

0% {box-shadow: 32px 8px #181818, 40px 8px #181818,...}

...

}

在給定的例子中,動畫看起來相當無縫,所以我覺得值得一試.顯而易見的差異：我使用的gif有更多的幀和更多的像素.

就像一個快速概述,我的CSS(我使用供應商標簽等,這只是一個例子)：

.pixel-art-3940::after {

animation: pixel-art-3940-frames 1s steps(5, end) infinite;

}

@keyframes pixel-art-3940-frames {

0% {box-shadow: 112px 68px rgba(77, 69, 64, 1),...}

16.666666666666668% {box-shadow:115px 65px rgba(77, 69, 64, 1),...}

...

}

動畫似乎確實在起作用,但是對動畫有一種強烈的“閃爍”效果.見下文：

我已經嘗試了Chrome中“閃爍轉換”的常用解決方案 – 例如將-webkit-backface-visibility設置為隱藏 – 但到目前為止還沒有解決問題.

正如我所說的,我擔心我只是對技術本身的限制.任何想法可能是什么問題,以及我是否可以解決它？

編輯：這個特定動畫的完整源代碼可以在這兩個Gists中找到.由于CSS文件的大小,我選擇了Gists.

總結

以上是生活随笔為你收集整理的html5边框闪烁,HTML – CSS框阴影动画像素艺术闪烁的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。