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