弹性堆叠图片切换特效

PetitQ 图片/图形 2019-1-20 2.24K 0 0

这是一款效果非常酷的 js 和 css3 适合移动 mobile 的弹性堆叠图片切换特效。该弹性堆叠图片切换特效的特点是支持移动触摸屏设备，可以通过手指滑动来切换图片。该弹性堆叠图片切换特效的特点是支持移动触摸屏设备，可以通过手指滑动来切换图片。所有图片开始时堆叠在一起，当你用手指滑动图片的时候，堆叠图片就像弹簧被扯动一样，最上面的一张图片被拉到最下面，效果非常炫酷。该效果类似于 html5 和 js 拖拽式超弹性效果堆叠图片切换展示特效，但是可以在移动触摸屏上使用。

HTML 结构

该弹性堆叠图片切换特效的 HTML 结构使用

也想出现在这里？联系我们吧

的嵌套结构。

```
<div class="slider">
```

    <div class="slide" ><img src="img/1.jpg" /><p>rutrum tellus a tempus :)</p></div>

    <div class="slide"><img src="img/3.jpg" /><p>litora torquent per conubia</p></div>

    <div class="slide"><img src="img/2.jpg" /><p>sed consectetur faucibus</p></div>

    <div class="slide" ><img src="img/4.jpg" /><p>eleifend tempus justo</p></div>

```
</div>
```

每一个.slide 是一张图片，

中的文本是图片的标题。

CSS 样式

在包裹容器上使用了 perspective 用于制作 3D 透视效果，并指定它的宽度和高度，以及动画过渡效果。

```
.slider{
```

      -webkit-animation:animation ease 1s;animation-delay:.8s;animation-fill-mode:backwards;

```
      margin: 0 auto;
```
```
      height:360px;
```
```
      width:240px;
```
```
      padding:40px;
```
```
      top:100px;
```
```
      perspective:1000px;
```
```
      transition:ease-in-out .2s;
```
```
  }
```

为了不让用户选择到图片标题文本，在.slide 和它里面的图片上都使用了 user-drag:none;属性。.slide 指定 transform-style 是为了使图片具有空间层次感。想了解更多可以看看这篇文章：CSS3 3D transforms 系列教程-卡片翻转。

```
.slide img { 
```
```
  text-align:center;
```
```
  width:100%; 
```
```
  height:100%; 
```
```
  -webkit-user-drag:none;
```
```
  user-drag:none;
```
```
  -moz-user-drag:none; 
```
```
  border-radius:2px; 
```
```
}
```
```
.slide{
```
```
      -webkit-user-select:none;
```
```
      user-select:none;
```
```
      -moz-user-select:none;
```
```
      position:absolute;
```
```
      height:280px;
```
```
      width:240px;
```

      box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);

```
      background:#fcfcfc;
```

      -webkit-transform-style:preserve-3d;

```
      transform-style:preserve-3d;
```
```
      -moz-transform-style:preserve-3d;
```
```
      text-align:center;
```
```
      /*overflow:hidden;*/
```
```
      border:12px white solid;
```
```
      box-sizing:border-box;
```
```
      border-bottom:55px white solid;
```
```
      border-radius:5px; 
```
```
  }
```
```
  .transition {
```

      -webkit-transition: cubic-bezier(0,1.95,.49,.73) .4s ;

      -moz-transition: cubic-bezier(0,1.95,.49,.73) .4s ;

      transition: cubic-bezier(0,1.95,.49,.73) .4s ;

```
  }
```

该弹性堆叠图片切换特效使用 js 来完成图片弹性拖拽效果。分为两种拖拽事件：鼠标拖拽的 mousemove 系列事件和移动触摸设备的 touchmove 系列事件。具体实现方式请查看文件的源代码。

弹性堆叠图片切换特效

已有 560 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

弹性堆叠图片切换特效

HTML 结构

CSS 样式

弹性堆叠图片切换特效

相关文章

纯CSS3制作逼真的汽车运动动画

html5+css3网格图片3d翻转Loading页面切换效果

Izmir - 鼠标悬停图片CSS3动画特效库

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

弹性堆叠图片切换特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复