当前位置:JS特效 » 图片效果 » 超酷堆叠图片展开和折叠jquery动画特效
 超酷堆叠图片展开和折叠jquery动画特效
如果您觉得内容不错,请分享:

插件介绍

这是一款效果非常炫酷的堆叠图片展开和折叠jquery动画特效。该特效中,所有图片可以像扑克牌一样进行堆叠,在触发相应的事件之后,堆叠的图片会议动画的方式全屏展开,效果非常炫酷。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:52
简要教程

这是一款效果非常炫酷的堆叠图片展开和折叠jquery动画特效。该特效中,所有图片可以像扑克牌一样进行堆叠,在触发相应的事件之后,堆叠的图片会议动画的方式全屏展开,效果非常炫酷。

使用方法

在页面底部,标签结束之前,引入jquery和PerspectiveTransform.js、TweenMax.min.js文件,以及init.js文件。

                
                
                
                
                
HTML结构

该堆叠图片的基本HTML结构如下:

......
CSS样式

为该堆叠图片特效添加下面的CSS样式:

body{overflow:hidden;}
.t-container{position:absolute;top:0;left:0;}
.t-container .t-content{position:absolute;top:0;left:0;width:400px;height:225px;}
.t-container .t-content img{position:absolute;width:400px;height:225px;}
.t-container .t-content .cover{position:absolute;top:0;left:0;background-color:rgba(0, 0, 0, 0.75);width:400px;height:225px;}
.container{position:absolute;-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%;bottom:50px;}
.container .btn{z-index:9999;}
                
Top