摘要：关键词动效多端兼容效果预览截图见附录，在线地址实现小结想要说明的主要是两点，一个是的运用，另一个是在移动端的兼容问题。多带带引用方法有如下这些移动端兼容问题，微信内置浏览器自动全屏的问题。处理方法是在标签上加，微信内置浏览器不起作用问题。
关键词：动效 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端：
移动端：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/11053.html
摘要：剖析新版，为你所用大漠第二个议题是大漠老师的，大漠老师是的站长，著有图解核心技术与案例实战。自定义属性大漠老师多次强调，这叫做自定义属性，不叫变量。 前言 对于我来讲，虽然做前端那么多年，但对 CSS 的探索非常少，很多 CSS 知识还是在毕业之前积累下来。揣着一本《精通CSS:高级Web标准解决方案(第二版)》（现在出第三版了，这是我在 CSS 道路上的启蒙书）在前端路上走了这么几...
摘要：财富管理专场上，蚂蚁金服微贷事业群高级前端技术专家王卓做了主题为蚂蚁微贷互动营销技术体系实践的精彩分享。通过互动技术，最终实现拉新，留存和促活等目标。营销技术方案对接研发平台，通过凤蝶系统和研发管理体系进行打通。 摘要：以数字金融新原力(The New Force of Digital Finance)为主题，蚂蚁金服ATEC城市峰会于2019年1月4日上海如期举办。财富管理专场上，蚂...
摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...
阅读 3468·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
