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.........完整代码请登录后点击上方下载按钮下载查看