15Apr

萝莉MM呈现图片翻滚3D动画效果

时间: 2014-4-15 分类: 网页特效 作者: 鱼小委 2865 次浏览

TAGS:

今天给大家分享一个图片翻滚的3D动画效果,当点击缩略图后图片以两种3D动画方式进行旋转,并呈现完整图片以及图片的文字描述信息。此演示程序有两种图片翻滚效果,一是垂直效果,二是水平效果。

此演示程序完全可以用作单独的相册使用,唯一的缺陷就是图片翻滚3D动画效果对浏览器的兼容性有要求,目前在火狐浏览器、谷歌浏览器下显示正常。为了让演示效果更为生动,特地为大家准备了一组rosimm图片,赶紧查看预览下吧。

article_top_650 查看预览 下载附件

其实小委对于网站开发还处在一个摸索期,没有系统的受过关于网站设计与制作的学习,凭着自己的兴趣摸索。对于像这样的实例是学习网站设计与制作的最佳选择。让我们一起来看看这个实例如何实现的。

HTML结构

这里引入了一个<section>标签,是HTML5中的新标签,定义文档中的节(section、区段),比如章节、页眉、页脚或文档中的其他部分,此示例中的<section>标签中包含了相册部分以及描述。

<section class="grid3d vertical" id="grid3d">
    <div class="grid-wrap">
        <div class="grid">
            <figure><img src="img/1.jpg" alt="img01"/></figure>
            <figure><img src="img/2.jpg" alt="img02"/></figure>
            <figure><img src="img/3.jpg" alt="img03"/></figure>
            <!-- ... -->
        </div>
    </div><!-- /grid-wrap -->
    <div class="content">
        <div>
            <div class="dummy-img"></div>
            <p class="dummy-text">Some text</p>
            <p class="dummy-text">Some more text</p>
        </div>
        <div>
            <!-- ... -->
        </div>
        <!-- ... -->
        <span class="loading"></span>
        <span class="icon close-content"></span>
    </div>
</section>

若要增加图片我们只需增加相应的<figure><figure>的结构如上。

查看预览 下载附件

本文作者:

热衷于学习基于WordPress平台的网站设计与开发,狂热的IT工作者,热爱生活。我要投稿

喜欢我们的文章请您与朋友分享:

更多

相关文章:

Comments

目前没有评论. 你将成为第一个吃沙螃蟹的人!

Comments
发表评论

电子邮件地址不会被公开。*标记为必填选项

  • 正确格式为: http://www.huangjianwei.com.cn

按 [ Ctrl+Enter ] 键直接提交

返回顶部