CSS3和JS炫酷3D拖拽卡片动画特效

当前位置:主页 > CSS3库 > CSS3动画 > CSS3和JS炫酷3D拖拽卡片动画特效
CSS3和JS炫酷3D拖拽卡片动画特效
分享:

    插件介绍

    这是一款使用CSS3和纯JavaScript制作的炫酷3D卡片拖拽特效。用户可以通过鼠标拖拽卡片,卡片在拖拽的过程中会发生3D变形,并且带有音效,效果非常炫酷。

    浏览器兼容性

    浏览器兼容性
    时间:2016-04-28
    阅读:
麦子学院
简要教程

这是一款使用CSS3和纯JavaScript制作的炫酷3D卡片拖拽特效。用户可以通过鼠标拖拽卡片,卡片在拖拽的过程中会发生3D变形,并且带有音效,效果非常炫酷。

由于IE浏览器不支持transform-style: preserve-3d;属性,所以该特效在IE浏览器中没有效果。

使用方法

HTML结构

该特效使用一个<div>作为容器,里面放置需要进行拖拽的卡片图片。

<div class="card">
  <img src="img/hearthstone-ragnaros.png" class="card-image" draggable="false">
</div>
                
CSS样式

该卡片拖拽特效中使用了自定义的鼠标光标,要自定义鼠标光标的样式,可以在body元素中通过cursor属性来设置。

body {
  background: #66677c;
  cursor: url(../img/hearthstone-cursor.png) 10 2, auto;
  overflow: hidden;
}
body:active {
  cursor: url(../img/hearthstone-click.png) 10 2, auto;
}
                

卡片容器使用绝对定位,开始时位于视口的左上角位置。它被设置了固定的宽度250像素。并将它制作为3D透视空间,透视的为400像素。will-change属性用于告诉浏览器优化即将执行的transform动画。user-select属性用于禁止优化选择文本。user-drag属性用于设置元素不能被拖动,在选中它后才以拖拽。

.card {
  left: 0;
  top: 0;
  -webkit-perspective: 400px;
               perspective: 400px;
  position: absolute;
  -webkit-transform-style: preserve-3d;
               transform-style: preserve-3d;
  will-change: transform;
  width: 250px;
  
  -webkit-user-select: none;
      -moz-user-select: none;
        -ms-user-select: none;
               user-select: none;
  
  -webkit-user-drag: none;
               user-drag: none;
}                  
                

卡片被鼠标按下后光标变为拳头状。

.card:active {
  cursor: url(../img/hearthstone-grab.png) 10 2, auto;
}                  
                

容器中的卡片图片的设置和容器相同。

.card-image {
  display: block;
  pointer-events: none;
  -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
  width: 100%;
  will-change: transform;
  user-drag: none;
  -webkit-user-select: none;
    -moz-user-select: none;
      -ms-user-select: none;
             user-select: none;
  
  -webkit-user-drag: none;
  user-drag: none;
}                  
                
JavaScript

特效中使用JavaScript来处理优化和卡片的交互。由于不考虑在IE浏览器中使用该特效的情况,JS代码中使用DOM2级事件处理程序 addEventListener来监听事件。主要为卡片和浏览器窗口绑定了下面的一些事件:

function bindevents() {
  card.addEventListener( 'mousedown', onmousedown );
  window.addEventListener( 'mouseup', onmouseup );
  window.addEventListener( 'mousemove', onmousemove );
  window.addEventListener( 'resize', onresize );
}                  
                

完整的JavaScript实现代码请参考下载文件。

网友评论