纯js和CSS3炫酷3D信用卡特效

当前位置:主页 > jQuery库 > 图片效果 > 纯js和CSS3炫酷3D信用卡特效
纯js和CSS3炫酷3D信用卡特效
分享:

    插件介绍

    这是一款使用纯Js和css3制作的炫酷3D信用卡特效。该3D信用卡特效中,信用卡会根据鼠标的位置进行相应的3D旋转,并带有光影特效,效果非常的酷。

    浏览器兼容性

    浏览器兼容性
    时间:01-01
    阅读:
简要教程

这是一款使用纯Js和css3制作的炫酷3D信用卡特效。该3D信用卡特效中,信用卡会根据鼠标的位置进行相应的3D旋转,并带有光影特效,效果非常的酷。

使用方法

在页面中引入样式文件style.css和js文件main.js

<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="path/to/main.js" type="text/javascript"></script>
                
HTML结构

该3D信用卡特效的整体布局HTML代码如下:

<div class="container">
  <div class="cover atvImg">
    <div class="atvImg-layer" data-img="img/visa-bg.jpg"></div>
    <div class="atvImg-layer" data-img="img/visa.png"></div>
  </div>

  <div class="cover atvImg">
    <div class="atvImg-layer" data-img="img/visa-bg-2.jpg"></div>
    <div class="atvImg-layer" data-img="img/visa.png"></div>
  </div>

  <div class="cover atvImg">
    <div class="atvImg-layer" data-img="img/visa-bg-3.jpg"></div>
    <div class="atvImg-layer" data-img="img/visa.png"></div>
  </div>

  <div class="cover atvImg">
    <div class="atvImg-layer" data-img="img/visa-bg-4.jpg"></div>
    <div class="atvImg-layer" data-img="img/visa.png"></div>
  </div>
</div>
                

下面是该3D信用卡的一些截图效果:

3d信用卡