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

代码语言：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;
	height:70px;
	background:url("//repo.bfw.wiki/bfwrepo/icon/5dfc717cd7564.png")
}
.visa .logo {
	left:58px;
	background-size:contain!important;
	top:45px;
	background:url("//repo.bfw.wiki/bfwrepo/icon/5dfc7189d5cd0.png")
}
.points {
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	width:100px;
	top:50%;
	height:0
}
.points .active {
	background:#245484
}
.points_point {
	float:left;
	width:8px;
	display:inline-block;
	border-radius:10px;
	height:8px;
	background:#69AEF3;
	margin-right:4px;
	position:relative;
	top:156px;
	left:26px
}

</style>
</head>

<body>

    <div class='cards'>
        <h1>Payment Card Swipes</h1>
        <h2>Swipe left through the cards</h2>
        <div class='cards_inner'>
            <div class='wrap'>
                <div class='cards_inner__card maestro'>
                    <div class='logo'></div>
                </div>
                <div class='cards_inner__card paypal'>
                    <div class='logo'></div>
                </div>
                <div class='cards_inner__card visa'>
                    <div class='logo'></div>
                </div>
                <div class='cards_inner__card mast.........完整代码请登录后点击上方下载按钮下载查看