先闡述下寫這篇文章的起因
項目是再app內置瀏覽器中嵌入的一個 H5 頁面，需求中有一個動畫的效果，比較簡單的動畫，而且動畫背景透明
下面來說說這個需求的坎坷經歷
1. 第一個想到的應該就是讓 UI 小姐姐做一個動態圖啦，於是 UI 小姐姐也做了，但遇到了幾個問題
- 動態圖片太大，快接近我的整個項目的2倍大小
- 做出來的透明背景 gif 圖片有白邊鋸齒，UI 小姐姐說無法解決
沒辦法，拋棄這個方案
2. 接下來就開始查資料，查到了一種可以實現頁面透明背景動畫的方式，而且沒有白邊，那就是使用透明背景的視頻，下面附上方法
- 先讓 UI 小姐姐做一個透明背景視頻，據她所知也只有 mov 格式的視頻支持透明通道了，那就 mov 格式的透明視頻
- 注意：瀏覽器是不支持 mov 格式的視頻的，所以就用了格式工廠將 mov 視頻轉成 webm ，也只能轉成 webm， 3s的視頻100k 左右還好還好，mp4 不支持透明的視頻，鬼就在這
- 然后將視頻作為網頁背景，這里不講該方法 參考這位大佬的做法 鏈接
- 桌面chrome,firefox瀏覽器測試 ok, 移動端 chrome, 神奇瀏覽器, via瀏覽器 測試 ok
交付測試時出現問題，微信內置瀏覽器打開后視頻沒有作為背景，而是一個視頻的黑塊，qq等瀏覽器也出現類似情況，即便沒有此問題的瀏覽器也會出現進入頁面時視頻的黑色背景一閃而過
桌面端瀏覽器倒是沒出啥問題，透明背景的視頻正常顯示並播放
想也是，一是視頻兼容性太差，二是webm 的兼容性更差，再是透明視頻兼容性更差，選這個方案的時候有點孟浪了
3. 總不能把這樣的bug頁面交付吧，我同意測試也不同意啊，測試同意項目經理也不同意啊，上面的人知道會被活剮了的，繼續查資料吧
然而並沒有查出個所以然，項目經理就讓我請教一下公司一個比較資深的前端，問了之后根據各方面原因就推薦了一個方法，用 CSS3 動畫，
說實話剛開始我是想到用 CSS3 動畫實現，但是畢竟技術有限，動畫中有些部分是用 CSS3 不能實現的，就想用其他的方法了，但現在其他方法也走不通了，去給項目經理說，給產品經理說，
都沒辦法了，那就用動畫實現，砍掉了一些 CSS3 不能實現的效果，只把 CSS3 能實現的留了下來，就給 UI 小姐姐要了動畫的拆解圖
還別說， CSS3 實現的動畫還挺好看，過渡絲滑，畫面圓潤有光澤
還有一種方法是使用蒙層摳出視頻中的動畫部分,自己研究了下還是沒怎么看懂 附上鏈接，有興趣的童鞋可以看看
總結一下: CSS3 能實現的效果盡量可以使用 CSS3 實現，效果是不錯的，使用視頻做背景兼容性不好，我在網上找過幾個用視頻做背景的網站，放在移動端要么視頻顯示有問題要么視頻一直靜止再開始的界面，png 序列幀也是可以實現，但占用更大，網站做的大的話可以考慮 gif , 總之根據需求而定，希望這篇文章對有此問題的朋友們有所幫助。