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

这是一款使用纯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信用卡

在线预览    源码下载

爱编程-编程爱好者经验分享平台


扫描下方二维码,加入前端微信群,共同交流进步!

文章评论

  

版权所有 爱编程 © Copyright 2012. w2bc.com. All Rights Reserved.
闽ICP备12017094号-3