你的位置:首页 > 软件开发 > Java > css3+jquery制作3d旋转相册

css3+jquery制作3d旋转相册

发布时间:2016-08-18 11:00:13
首先来看一下今天的炫酷效果:首先分析一下这张图片:1.每张图片都有倒影2.这11张图片呈圆形均匀排列3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的)那下面就开始吧。一。准备新建三个文件夹分别命名为css,js,img分别存放demo.css,jquery.js、 ...

css3+jquery制作3d旋转相册

首先来看一下今天的炫酷效果:

css3+jquery制作3d旋转相册

首先分析一下这张图片:

1.每张图片都有倒影

2.这11张图片呈圆形均匀排列

3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的)

那下面就开始吧。

一。准备

新建三个文件夹分别命名为css,js,img分别存放demo.css,jquery.js、demo.js,11张示例图片。新建demo.html将demo.css,jquery.js,demo.js引入。

二。图片倒影制作

 1 <div id="wrap"> 2   <img src='/images/loading.gif' data-original="img/1.jpg"> 3   <img src='/images/loading.gif' data-original="img/2.jpg"> 4   <img src='/images/loading.gif' data-original="img/3.jpg"> 5   <img src='/images/loading.gif' data-original="img/4.jpg"> 6   <img src='/images/loading.gif' data-original="img/5.jpg"> 7   <img src='/images/loading.gif' data-original="img/6.jpg"> 8   <img src='/images/loading.gif' data-original="img/7.jpg"> 9   <img src='/images/loading.gif' data-original="img/8.jpg">10   <img src='/images/loading.gif' data-original="img/9.jpg">11   <img src='/images/loading.gif' data-original="img/10.jpg">12   <img src='/images/loading.gif' data-original="img/11.jpg">13 </div>

原标题:css3+jquery制作3d旋转相册

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。