• 技术文章 >web前端 >H5教程

    苹果官网设计翻转特效如何实现?

    2016-06-07 08:42:44原创1485
    苹果官网目前的翻页视差效果,不同于目前人们所熟知的上下元素或者左右元素的位移差。例如目前Apple Watch页面来看Apple Watch - Apple (中国),在页面翻滚的同时,手表也会以空间形式的翻转。现在来看手表绝不是一个简单的png图片了。这种是运用了JQ和CSS3的哪些效果可以实现的,还有就是需要什么样的图片素材可以满足这种翻转。希望大神能够帮忙解析一下

    回复内容:

    谢邀。

    有趣的效果。

    实际上是 css3 的变换(transform) ,和 canvas 帧动画。

    注意看下图,这是其中一个手表的图片。


    单单为了做这一个手表的动画,发了104 个请求(汗。。)

    然后第一个图片的表带是张开的,后面的图片越来越闭合,这就是帧动画。

    然后同一帧图片有两个请求,一个 png, 一个 svg , svg 是用来做蒙板抠图用的( Photoshop 用过么?)。这一这里的 .globalCompositeOperation 。



    实际上还有优化空间,可以用 sprite sheet 把这些散图拼起来,节约 http 请求。
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Apple Watch CSS3 png
    上一篇:为什么有些网页一开始不显示内容,等不耐烦了关掉的时候却显示了内容一闪而过? 下一篇:我想做一个卖电影票的HTML5 请问HTML5需要什么要素?
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 开发人员需要牢记的HTML 5安全问题• HTML5 b和i标记将被赋予真正的语义_html5教程技巧• 基于Modernizr 让网站进行优雅降级的分析_html5教程技巧• html5配合css3实现带提示文字的输入框(摆脱js)_html5教程技巧• HTML5 微格式和相关的属性名称_html5教程技巧
    1/1

    PHP中文网