Unity图片怎么像书本一样翻页实现类似书本的翻页效果

之前在网上看到一款比较有新意嘚HTML5文字特效文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简單的主要利用了CSS3的transform属性,分别对X轴、Y轴、Z轴进行翻转先看一下效果截图。

看效果图这些文字是不是很有立体的感觉而这个立体的感覺并不是有投影和阴影来实现的,而是通过翻转

接下来我们来看一下源码。首先是HTML代码非常简单,列出我们需要渲染的文字:

接下来昰核心CSS3代码这里我们略去了控制页面样式的CSS代码,把实现翻页效果文字的CSS代码提取出来

这样我们就让这些字母安安静静的排列起来,並有了自己的背景颜色等待强大的CSS3来渲染。

接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画

由于东西也比较简单,全是代碼没啥好详细解说的,有问题请指正见笑了,呵呵

之前给大家讲解了android实现书籍翻页效果的原理并在文章结尾处说明要发布源码,呵呵但是最近有不少琐事缠身,原计划给大家的源码demo没有时间完成可能要delay啦~~但是由于源码实现啦原理篇所说的大部分效果,只是在阴影方面还是有些bug,所以我将它贴出了让大家都来一起帮忙实现毕竟授人鱼不如授人渔,实踐才是王道

下面是demo的画面,可以实现四个角的拖拽:

由上图可以看到源码实现啦,翻起页背面和当前页的光影效果但是翻起页背面嘚光影效果未实现。

   红圈标明处为翻起页投射在当前页上的阴影的顶点没有定位好,出现的bug暂时没有时间来修改,需要等手上琐事完荿啦在继续欢迎大家来修改,最好将修改点也开源告诉大家听~~

我要回帖

更多关于 图片怎么像书本一样翻页 的文章

 

随机推荐