<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>信用卡用户界面</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
min-height: 100%;
font-family: 'Open sans', sans-serif;
}
body {
background: linear-gradient(50deg, #f3c680, #a1e3e2);
}
/*--------------------
Buttons
--------------------*/
.btn {
display: block;
background: #bded7d;
color: white;
text-decoration: none;
margin: 20px 0;
padding: 15px 15px;
border-radius: 5px;
position: relative;
}
.btn::after {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0), 0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0), 0 3px 3px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.btn:hover::after {
background: rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}
/*--------------------
Form
--------------------*/
.form fieldset {
border: none;
padding: 0;
padding: 10px 0;
position: relative;
clear: both;
}
.form fieldset.fieldset-expiration {
float: left;
width: 60%;
}
.form fieldset.fieldset-expiration .select {
width: 84px;
margin-right: 12px;
float: left;
}
.form fieldset.fieldset-ccv {
clear: none;
float: right;
width: 86px;
}
.form fieldset label {
display: block;
text-transform: uppercase;
font-size: 11px;
color: rgba(0, 0, 0, 0.6);
margin-bottom: 5px;
font-weight: bold;
font-family: Inconsolata;
}
.form fieldset input,
.form fieldset .select {
width: 100%;
height: 38px;
color: #333333;
padding: 10px;
border-radius: 5px;
font-size: 15px;
outline: none !important;
border: 1px solid rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}
.form fieldset input.input-cart-number,
.form fieldset .select.input-cart-number {
width: 82px;
display: inline-block;
margin-right: 8px;
}
.form fieldset input.input-cart-number:last-child,
.form fieldset .select.input-cart-number:last-child {
margin-right: 0;
}
.form fieldset .select {
position: relative;
}
.form fieldset .select::after {
content: '';
border-top: 8px solid #222;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position: absolute;
z-index: 2;
top: 14px;
right: 10px;
pointer-events: none;
}
.form fieldset .select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
padding: 0;
border: none;
width: 100%;
outline: none !important;
top: 6px;
left: 6px;
background: none;
}
.form fieldset .select select :-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.form a {
width: 100%;
outline: none !important;
background: -webkit-gradient(linear, left top, left bottom, from(#49a09b), to(#3d8291));
background: linear-gradient(180deg, #49a09b, #3d8291);
text-transform: uppercase;
font-weight: bold;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
margin-top: 90px;
}
.form button .fa {
margin-right: 6px;
}
/*--------------------
Checkout
--------------------*/
.checkout {
margin: 150px auto 30px;
position: relative;
width: 480px;
background: white;
border-radius: 15px;
padding: 160px 45px 30px;
-webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
/*--------------------
Credit Card
--------------------*/
.credit-card-box {
-webkit-perspective: 1000;
perspective: 1000;
width: 400px;
height: 280px;
position: absolute;
top: -112px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.credit-card-box:hover .flip, .credit-card-box.hover .flip {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.credit-card-box .front,
.credit-card-box .back {
width: 400px;
height: 250px;
border-radius: 15px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: linear-gradient(135deg, #bd6772, #53223f);
position: absolute;
color: #fff;
font-family: Inconsolata;
top: 0;
left: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.credit-card-box .front::before,
.credit-card-box .back::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("svg/44386.svg") no-repeat center;
background-size: cover;
opacity: .05;
}
.credit-card-box .flip {
-webkit-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.credit-card-box .logo {
position: absolute;
top: 9px;
right: 20px;
width: 60px;
}
.credit-card-box .logo svg {
width: 100%;
height: auto;
fill: #fff;
}
.credit-card-box .front {
z-index: 2;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.credit-card-box .back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.credit-card-box .back .logo {
top: 185px;
}
.credit-card-box .chip {
position: absolute;
width: 60px;
height: 45px;
top: 20px;
left: 20px;
background: linear-gradient(135deg, #ddccf0 0%, #d1e9f5 44%, #f8ece7 100%);
border-radius: 8px;
}
.credit-card-box .chip::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 4px solid rgba(128, 128, 128, 0.1);
width: 80%;
height: 70%;
border-radius: 5px;
}
.credit-card-box .strip {
background: linear-gradient(135deg, #404040, #1a1a1a);
position: absolute;
width: 100%;
height: 50px;
top: 30px;
left: 0;
}
.credit-card-box .number {
position: absolute;
margin: 0 auto;
top: 103px;
left: 19px;
font-size: 38px;
}
.credit-card-box label {
font-size: 10px;
letter-spacing: 1px;
text-shadow: none;
text-transform: uppercase;
font-weight: normal;
opacity: 0.5;
display: block;
margin-bottom: 3px;
}
.credit-card-box .card-holder,
.credit-card-box .card-expiration-date {
position: absolute;
margin: 0 auto;
top: 180px;
left: 19px;
font-size: 22px;
text-transform: capitalize;
}
.credit-card-box .card-expiration-date {
text-align: right;
left: auto;
right: 20px;
}
.credit-card-box .ccv {
height: 36px;
background: #fff;
width: 91%;
border-radius: 5px;
top: 110px;
left: 0;
right: 0;
position: absolute;
margin: 0 auto;
color: #000;
text-align: right;
padding: 10px;
}
.credit-card-box .ccv label {
margin: -25px 0 14px;
color: #fff;
}
</style>
</head>
<body>
<div class="checkout">
<div class="credit-card-box">
<div class="flip">
<div class="front">
<div class="chip"></div>
<div class="logo">
<svg version="1.1" id="visa" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="47.834px" height="47.834px" viewBox="0 0 47.834 47.834" style="enable-background:new 0 0 47.834 47.834;">
<g>
<g>
<path d="M44.688,16.814h-3.004c-0.933,0-1.627,0.254-2.037,1.184l-5.773,13.074h4.083c0,0,0.66
jQuery+css3制作在线电子信用卡信息填写界面特效源码.zip （2个子文件） 
132686900563560850 likecs.com_132686900568895970 
index.html 15KB js 
jquery.min.js 91KB资源评论
毕业_设计
- 粉丝: 1979
- 资源: 1万+
最新资源
- (源码)基于C语言的系统服务框架.zip
- (源码)基于Spring MVC和MyBatis的选课管理系统.zip
- (源码)基于ArcEngine的GIS数据处理系统.zip
- (源码)基于JavaFX和MySQL的医院挂号管理系统.zip
- (源码)基于IdentityServer4和Finbuckle.MultiTenant的多租户身份认证系统.zip
- (源码)基于Spring Boot和Vue3+ElementPlus的后台管理系统.zip
- (源码)基于C++和Qt框架的dearoot配置管理系统.zip
- (源码)基于 .NET 和 EasyHook 的虚拟文件系统.zip
- (源码)基于Python的金融文档智能分析系统.zip
- (源码)基于Java的医药管理系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
