当前位置:主页 > 网页特效 > HTML5+CSS3 >

html5+css3移动手机(Mobile) App展示3d动画效果

发布时间:2018/06/10 来源:互联网 浏览: 关键词:动画效果 CSS3 HTML5 3D app 
html5+css3移动手机(Mobile) App展示3d动画效果 html5+css3移动手机(Mobile) App展示3d动画效果
阿里云

本教程将和大家分享一个移动手机(Mobile) App展示3d效果。效果中将使用到一个3d移动手机和一些app应用的截图。当点击切换按钮,移动手机交旋转一定的角度,然后使所有的app应用截图在手机上方呈堆叠状排列显示。你之前是否见过这种App展示,我想那一定是使用CSS做的。

注意: 这个例子只在少数几个现代浏览器中有效果。

我们要稍微的移动一下手机,使它旋转一定的角度,如下图:

移动手机

然后,我们将通过一个包装类来使手机过渡到第二种状态,这时App截图出现在手机上方,如下图:

移动手机App展示

第二种效果使用了不同的旋转方式:

移动手机App展示的第二种效果

第三种效果是在第二种效果的基础上添加了一些说明:

移动手机App展示的第三种效果

在下载的压缩包中包含一个手机和App旋转角度变量的其它变量的SCSS文件,你可以参考它来修改展示的效果。

本教程就到这里,希望对你有所帮助!

共有人阅读,期待你的评论!评论
Top