bootstrap创意蓝色登录表单效果代码

代码语言:html

所属分类:表单美化

代码描述:bootstrap创意蓝色登录表单效果代码

代码标签: 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