bootstrap创意蓝色登录表单效果代码
代码语言:html
所属分类:表单美化
代码描述:bootstrap创意蓝色登录表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
body {
margin:0;
padding:0;
overflow-x:hidden
}
.main-bg::after {
background-color:#fef5e4;
-webkit-border-radius:0 0 233px 135px;
-moz-border-radius:0 0 233px 135px;
border-radius:0 0 233px 135px;
content:"";
position:absolute;
right:-119px;
top:-93px;
background-color:#fef5e4;
width:466px;
height:595px;
-webkit-transform:rotate(45deg);
transform:rotate(116deg);
z-index:-2
}
.box-conatiner {
contain:content;
margin:50px auto;
height:500px;
width:80%;
background-color:#5d4ef3;
border-radius:0 70px;
box-shadow:0 .46875rem 2.1875rem rgba(4,9,20,0.03),0 .9375rem 1.40625rem rgba(4,9,20,0.03),0 .25rem .53125rem rgba(4,9,20,0.05),0 .125rem .1875rem rgba(4,9,20,0.03)
}
.box-conatiner::before {
content:"";
position:absolute;
right:-20px;
background-size:100%;
top:-80px;
width:1220px;
height:653px
}
#a {
-webkit-animation:wait 0s alternate infinite;
animation:wait 0s alternate infinite
}
.circle-ripple {
background-color:transparent;
width:1px;
height:1px;
border-radius:50%;
-webkit-animation:ripple .7s linear infinite;
animation:ripple .7s linear infinite;
left:60px;
position:absolute;
top:44px
}
@-webkit-keyframes wait {
0% {
opacity:0
}
20% {
opacity:0
}
40% {
opacity:0
}
60% {
opacity:0
}
100% {
opacity:1
}
}@keyframes wait {
0% {
opacity:0
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0