jquery-ui实现支付卡片拖拽幻灯片切换效果代码-html代码-BFW代码库

jquery-ui实现支付卡片拖拽幻灯片切换效果代码

代码语言：html

所属分类：幻灯片

代码描述：jquery-ui实现支付卡片拖拽幻灯片切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

<style>
  @import url(https://fonts.googleapis.com/css?family=Nunito);
        body {
        overflow:hidden;
        background:-webkit-linear-gradient(top,#5799db 0,#3f8edd 100%);
        height:100vh
}
.cards {
        width:400px;
        height:300px;
        position:absolute;
        left:0;
        right:0;
        top:50%;
        margin:auto;
        transform:translateY(-50%)
}
.cards h1 {
        margin:0;
        font-size:24px;
        text-align:center;
        font-weight:500;
        color:white;
        font-family:"Nunito",sans-serif
}
.cards h2 {
        margin:0;
        font-size:14px;
        text-align:center;
        font-weight:200;
        color:#A4C9EF;
        font-family:"Nunito",sans-serif
}
.cards_inner {
        perspective:800px;
        position:relative;
        top:60px
}
.cards_inner .wrap {
        width:220px;
        margin:0 auto;
        position:relative;
        transform-style:preserve-3d
}
.cards_inner .invalid {
        pointer-events:none;
        left:-180px!important;
        opacity:0;
        transition:all .23s
}
.cards_inner .animate {
        transition:all .2s cubic-bezier(0.56,2.15,0.25,0.715)
}
.cards_inner .card_in {
        opacity:0;
        transform:scale(1);
        margin-top:40px;
        -webkit-animation:pop .6s .1s cubic-bezier(0.56,1.75,0.25,0.715);
        animation:pop .6s .1s cubic-bezier(0.56,1.75,0.25,0.715);
        right:0
}
@-webkit-keyframes pop {
        0% {
        margin-top:40px;
        opacity:0
}
100% {
        margin-top:0;
        opacity:1
}
}@keyframes pop {
        0% {
        margin-top:40px;
        opacity:0
}
100% {
        margin-top:0;
        opacity:1
}
}.cards_inner .card_in_two {
        opacity:1;
        transform:scale(1);
        margin-top:40px;
        transition:all .2s cubic-bezier(0.56,2.15,0.25,0.715);
        margin-top:0
}
.cards_inner__card {
        transition:transform .2s cubic-bezier(0.56,2.15,0.25,0.715);
        position:absolute;
        margin-top:0;
        left:0;
        right:0;
        background:-moz-linear-gradient(top,white 0,#f7f7f7 100%);
        top:50%;
        margin:auto;
        width:220px;
        height:130px;
        background:-webkit-linear-gradient(top,white 0,#f7f7f7 100%);
        border-radius:12px;
        box-shadow:0 2px 12px rgba(0,0,0,0.22);
        cursor:pointer
}
.cards_inner__card:nth-of-type(1) {
        top:10px;
        transform:translateZ(-180px)
}
.cards_inner__card:nth-of-type(2) {
        top:20px;
        transform:translateZ(-120px)
}
.cards_inner__card:nth-of-type(3) {
        top:30px;
        transform:translateZ(-60px)
}
.cards_inner__card:nth-of-type(4) {
        top:40px;
        transform:translateZ(0px)
}
.maestro .logo {
        background:url("//repo.bfw.wiki/bfwrepo/icon/5dfc717324b89.png")
}
.paypal .logo {
        background:url("//repo.bfw.wiki/bfwrepo/icon/61c7d408b3ea0.jpg");
        left:58px;
        background-size:contain!important;
        top:49px
}
.logo {
        width:100px;
        height:70px;
        position:relative;
        background-repeat:no-repeat!important;
        left:62px;
        background-size:contain!important;
        top:29px
}
.mastercard .logo {
        left:73px;
        background-size:contain!important;
        top:44px;
        width:70px;
        hei.........完整代码请登录后点击上方下载按钮下载查看