NiceSnippets.com
Register and login form page design with animation using bootstrap
you can get free ragister and login form page design free. register and login form design in tab with every refresh different background animation.
you can get code of login and registration form with background animation snippet. we give you example of animated login form in bootstrap , you can simple copy bellow code and use in your project. If it free snippets of bootstrap login and registration form template free download So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code bootstrap login and registration form template snippets, click on JS Code tab get code of jquery codd for background animated login page snippets, same as for CSS Code tab. It's pretty easy and simple example of background animation login and registration form snippet.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="perspective">
<div id="container"></div>
</div>
<div class="row-fluid">
<div class="col-md-3 col-sm-6 col-xs-10 login-box">
<div class="row login-box-header">
<div class="col-md-12 col-sm-12 logo">
<img src="https://dummyimage.com/100x100/4ADDC1/fff&text=Logo">
</div>
<div class="col-md-12 col-sm-12 company-name text-center">
<h3>Your Company Name</h3>
</div>
</div>
<div class="row login-box-body">
<ul class="nav nav-tabs-custom">
<li class="active"><a href="#login" data-toggle="tab">Login</a></li>
<li><a href="#register" data-toggle="tab">Register</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="login">
<form action="" class="form">
<div class="col-md-12 form-body">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="User Name">
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="email" type="password" class="form-control" name="email" placeholder="Password">
</div>
<br>
</div>
<div class="col-md-12 form-footer text-center">
<button class="btn btn-block">Log In</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register">
<div class="col-md-12 form-body">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="name" placeholder="User Name">
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="email" type="password" class="form-control" name="password" placeholder="Password">
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="email" type="password" class="form-control" name="password" placeholder="Conform Password">
</div>
<br>
</div>
<div class="col-md-12 form-footer text-center">
<button class="btn btn-block">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
body {
overflow: hidden;
background: black;
position: relative;
}
.ball {
position: absolute;
@background: orangered;
left: 50vw;
top: 50vh;
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow: 0px 0px 40px magenta;
}
.login-box{
z-index: 1001;
box-shadow: 0px 1px 3px 0px #4ADDC1;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.login-box-header{
background: rgba(74,212,193,0.7);
border-bottom:2px solid #2CA38B;
}
.logo img{
top:-50px;
left:50%;
width:100px;
height:100px;
position: absolute;
border-radius: 50%;
box-shadow:0px 3px 3px #2CA38B;
transform: translateX(-50%);
}
.company-name h3{
color:#79787D;
margin:70px 0px 20px 0px;
color: #fff;
}
.login-box-body{
background: rgba(255,255,255,0.7);
}
.nav-tabs-custom{
border: 1px solid #4ADDC1;
width: 90%;
margin:15px auto;
padding: 5px 5px 6px 5px;
}
.nav-tabs-custom li{
float: left;
width: 50%;
text-align: center;
background: rgba(255,255,255,0.7);
font-weight: bold;
}
.nav-tabs-custom li a{
color: #4ADDC1;
}
.nav-tabs-custom li:hover a,
.nav-tabs-custom li a:focus,
.nav-tabs-custom li.active a,
.nav-tabs-custom li.active{
color: #fff;
background: rgba(74,212,193,0.7) !important;
}
.form-body{
background: rgba(255,255,255,0.7);
padding: 15px;
}
.form-body .input-group-addon{
background: #4ADDC1;
color: #fff;
border: 1px solid #4ADDC1;
border-radius: 0px;
}
.form-body .input-group input{
border-radius: 0px;
}
.form-footer{
border-top:2px solid #2CA38B;
background: rgba(74,212,193,0.7);
padding: 15px;
}
.form-footer .btn{
background: rgba(255,255,255,0.7);
color: #4ADDC1;
font-weight: bold;
border-radius: 0px;
}
var n = 100;
var frames = [];
frames.push({transform: 'none'})
var frameCount = 3 + Math.random() * 8;
var translate = 0;
var rotate = 0;
var rotateY = 0;
var scale = 1;
var z = 0;
for (var i = 0; i < frameCount; i++) {
z += (0.5 - Math.random()) * 100;
scale += (0.5 - Math.random()) * 2;
rotate += (0.5 - Math.random()) * 1080;
rotateY += (0.5 - Math.random()) * 1080;
translate += (0.5 - Math.random()) * 500;
frames.push({
transform: 'rotate(' + rotate + 'deg) rotateY(' + rotateY + 'deg) translateX(' + translate + 'px) scale(' + scale + ') translateZ(' + z + 'px)',
});
}
frames.push({transform: 'none'})
var duration = frames.length * 5000;
for (var i = 0; i < n; i++) {
var ball = document.createElement('ball');
var color = 'rgb(' + Math.round((i / n) * 256) + ', 128, 200)';
ball.style.background = color;
document.body.appendChild(ball);
ball.classList.add('ball');
ball.animate(frames, {
duration: duration,
iterations: Infinity,
delay: i / n * -duration,
});
}
