資訊專欄INFORMATION COLUMN
摘要：關(guān)鍵詞動效多端兼容效果預覽截圖見附錄，在線地址實現(xiàn)小結(jié)想要說明的主要是兩點，一個是的運用，另一個是在移動端的兼容問題。多帶帶引用方法有如下這些移動端兼容問題，微信內(nèi)置瀏覽器自動全屏的問題。處理方法是在標簽上加，微信內(nèi)置瀏覽器不起作用問題。
關(guān)鍵詞：動效 svg video 多端兼容效果預覽
截圖見附錄，在線地址
實現(xiàn)小結(jié)想要說明的主要是兩點，一個是svg的運用，另一個是video在移動端的兼容問題。
鏤空效果的實現(xiàn)思路一是用png，優(yōu)點是簡單直接，缺點就是非矢量，可能有鋸齒，多端需要多張圖；
思路二是用svg，優(yōu)點是矢量，可以直接用svg標簽也可以像圖片一樣多帶帶引用，缺點就是需要一點學習成本。
顯然，這次采用的是思路二，對于svg的本次使用，簡單說明下：
由于是全屏半透明“M”鏤空，因此首先想到的是有個直接全屏的svg，但是實際要響應多終端，寬高比都不同，一個全屏的svg是不可行的。怎么辦呢？利用snap.svg等js庫動態(tài)創(chuàng)建是不是可以呢？問題是很多時候鏤空的圖案是特殊的設(shè)計圖案，一般的程序員想去直接繪制也不太可行。
最后實現(xiàn)是設(shè)計師提供一個"M"svg文件，咱們根據(jù)屏幕大小實時的補全上邊左邊右邊部分。
對于svg的使用可以多帶帶引用文件也可以嵌入HTML中。
多帶帶引用方法有如下這些：
...
移動端video兼容問題
1，微信內(nèi)置瀏覽器自動全屏的問題。
處理方法是在video標簽上加x5-playsinline="" playsinline="" webkit-playsinline=""
2，微信內(nèi)置瀏覽器z-index不起作用問題。
處理方法是在video便簽上加x5-video-player-type="h5"
3，實際中還有各種其他問題，例如自動播放屬性設(shè)置無效，iOS端編碼格式要求等，最后因為業(yè)務及時間等因素綜合考慮，針對移動觸屏端改用圖片循環(huán)播。
附錄：
PC端：
移動端：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/11053.html
摘要：如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉(zhuǎn)換成原生動畫初來乍到，本文搬運自我月份在知乎發(fā)的文章。 前端面試之 CSS3 新特性 除了 HTML5 的新特性，CSS3 的新特性也是面試中經(jīng)常被問到的。 如何用 js 獲取虛擬鍵盤高度？-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始～ 這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題...
摘要：剖析新版，為你所用大漠第二個議題是大漠老師的，大漠老師是的站長，著有圖解核心技術(shù)與案例實戰(zhàn)。自定義屬性大漠老師多次強調(diào)，這叫做自定義屬性，不叫變量。 前言 對于我來講，雖然做前端那么多年，但對 CSS 的探索非常少，很多 CSS 知識還是在畢業(yè)之前積累下來。揣著一本《精通CSS:高級Web標準解決方案(第二版)》（現(xiàn)在出第三版了，這是我在 CSS 道路上的啟蒙書）在前端路上走了這么幾...
摘要：財富管理專場上，螞蟻金服微貸事業(yè)群高級前端技術(shù)專家王卓做了主題為螞蟻微貸互動營銷技術(shù)體系實踐的精彩分享。通過互動技術(shù)，最終實現(xiàn)拉新，留存和促活等目標。營銷技術(shù)方案對接研發(fā)平臺，通過鳳蝶系統(tǒng)和研發(fā)管理體系進行打通。 摘要：以數(shù)字金融新原力(The New Force of Digital Finance)為主題，螞蟻金服ATEC城市峰會于2019年1月4日上海如期舉辦。財富管理專場上，螞...
摘要：延伸閱讀學習與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發(fā)布的前端每周清單...
閱讀 3494·2023-04-25 21:43
閱讀 3106·2019-08-29 17:04
閱讀 807·2019-08-29 16:32
閱讀 1546·2019-08-29 15:16
閱讀 2157·2019-08-29 14:09
閱讀 2747·2019-08-29 13:07
閱讀 1633·2019-08-26 13:32
閱讀 1326·2019-08-26 12:00
