首先来看一下今天的炫酷效果:首先分析一下这张图片:1.每张图片都有倒影2.这11张图片呈圆形均匀排列3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的)那下面就开始吧。一。准备新建三个文件夹分别命名为css,js,img分别存放demo.css,jquery.js、 ...
首先来看一下今天的炫酷效果:
首先分析一下这张图片:
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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。