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