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