'CSS Animation - Question create divs from style
Update from the question:
So, replying to your question the HTML file is missing since the website goes down.
But I think the HTML file is that:
<body class="white-body">
<div class="top-color mb-40">
</div>
<div class="container register-container">
<div class="col-md-12">
<h2 class="site-name">
<a href="/web/20160123223230/http://www.littlebux.com/home">
<span>Little
</span>Bux
</a>
</h2>
<form method="post">
<div class="form-container">
<p>Don't have an account?
<strong>
<a href="/web/20160123223230/http://www.littlebux.com/register">Register Now.
</a>
</strong>
</p>
<div class="row">
<div class="form-group form-group-lg col-lg-12">
<input class="form-control" type="text" name="username" value="" placeholder="Username">
</div>
<div class="form-group form-group-lg col-lg-12">
<input class="form-control" type="password" name="password" placeholder="Password">
</div>
<div class="form-group form-group-lg col-lg-12">
<input class="form-control" type="text" placeholder="Captcha" id="captcha" name="captcha" autocomplete="off" style="width:196px;" maxlength="4">
<img id="captchaIMG" border="0" src="/web/20160123223230im_/http://www.littlebux.com/?i=captcha&t=56a3ff7e6c782" style="height: 45px;
float: right;
margin-top: -45px;
margin-right: 58px;"/>
</div>
<div class="ui-checkbox ui-checkbox-primary">
<label>
<span>Forgot your password?
<a href="/web/20160123223230/http://www.littlebux.com/login/reset">Request a new here.
</a>
</span>
</label>
</div>
<button type="submit" id="login" name="register" class="btn btn-lg btn-register text-uppercase">Login Now
</button>
</div>
</div>
<input type="hidden" name="hash" value="56A3FF7E6C48956A3FF7E6C4C7"/>
</form>
</div>
</div>
<script src="/web/20160123223230js_/http://www.littlebux.com/design/js/bootstrap.min.js">
</script>
<script src="/web/20160123223230js_/http://www.littlebux.com/design/js/main.js">
</script>
And about your reference about the cage and box, it really make sense.. I think it should be:
<div class="cage">
<div class="box">
<div class="drop-one">
</div>
<div class="drop-two">
</div>
<div class="ripple">
<div class="ripple l-side">
</div>
<div class="ripple r-side">
</div>
</div>
<div class="drop-three">
</div>
<div class="drop-four">
</div>
</div>
</div>
But that's still does not make the liquid effect, look at this video
How sholud it be? Maybe I'm missing some part?
The JavaScript shows:
/*==========================================
Register and Login Loader
==========================================*/
/* See the PHP function loader() */
But I do not have access to PHP loader() since it is client side, however it should be showing in the HTML code? Right?
The CSS is available here
And another question, how is it possible that the <div class="cage"> is not showing in the HTML? So how the site was able to display that? Maybe web.archive.org does not crawl this specific part of HTML code? But when I check the Youtube video, it is showing the user is in fact in the login page, so that should be the correct code. It is a bit weird for me.
Old reply ------
I want to know if is possible to create the right divs from the style?
The site that has this style was already down, but i got the css style from archive.org, but I'm not sure if it possible to create the divs from the style.
I think the first divs should be something like this:
<div class="cage">
<div class="box">
<div class="drop-one"></div>
<div class="drop-two"></div>
<div class="ripple">
<div class="ripple l-side"></div>
<div class="ripple r-side"></div>
</div>
<div class="drop-three"></div>
<div class="drop-four"></div>
</div>
</div>
But the styles has another class like "loading-circles" and "circles" and I do not any idea how to create that divs. In fact the animation should be balls kicking and it create the illusion like liquid.
You can see here The css I got here
/*== FULL Page Loader ==*/
.cage {
position: fixed;
bottom: 0;
top: 50%;
left: -10%;
right: -10%;
background-color: #27AE60;
}
.cage.two .box {
-webkit-filter: url("/web/20160407203502im_/http://www.littlebux.com/design/css/style.css#goo2");
filter: url("/web/20160407203502im_/http://www.littlebux.com/design/css/style.css#goo2");
}
.cage .box {
width: 960px;
margin: auto;
background-color: #27AE60;
position: relative;
display: block;
height: 300px;
-webkit-filter: url("/web/20160407203502im_/http://www.littlebux.com/design/css/style.css#goo");
filter: url("/web/20160407203502im_/http://www.littlebux.com/design/css/style.css#goo");
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
.drop-one {
height: 50px;
width: 50px;
border-radius: 50%;
overflow: hidden;
position: absolute;
background-color: #27AE60;
top: 0;
left: 50%;
-webkit-animation: big-drop 2s ease infinite;
-moz-animation: big-drop 2s ease infinite;
animation: big-drop 2s ease infinite;
}
.drop-two {
height: 40px;
width: 40px;
border-radius: 50%;
overflow: hidden;
position: absolute;
background-color: #27AE60;
top: 10px;
left: 51%;
-webkit-animation: big-drop 2s ease infinite 0.075s;
-moz-animation: big-drop 2s ease infinite 0.075s;
animation: big-drop 2s ease infinite 0.075s;
}
.drop-three {
height: 20px;
width: 20px;
border-radius: 50%;
overflow: hidden;
position: absolute;
background-color: #27AE60;
top: 10px;
left: 51%;
-webkit-animation: small-drop 2s ease infinite 1s;
-moz-animation: small-drop 2s ease infinite 1s;
animation: small-drop 2s ease infinite 1s;
}
.drop-four {
height: 20px;
width: 20px;
border-radius: 50%;
overflow: hidden;
position: absolute;
background-color: #27AE60;
top: 10px;
left: 51%;
-webkit-animation: small-drop 2s ease infinite 1.075s;
-moz-animation: small-drop 2s ease infinite 1.075s;
animation: small-drop 2s ease infinite 1.075s;
}
@-webkit-keyframes big-drop {
0% {
top: 25%;
}
50% {
top: -40%;
}
100% {
top: 25%;
}
}
@-moz-keyframes big-drop {
0% {
top: 25%;
}
50% {
top: -40%;
}
100% {
top: 25%;
}
}
@keyframes big-drop {
0% {
top: 25%;
}
50% {
top: -40%;
}
100% {
top: 25%;
}
}
@-webkit-keyframes small-drop {
0% {
top: 25%;
}
50% {
top: -23%;
}
100% {
top: 25%;
}
}
@-moz-keyframes small-drop {
0% {
top: 25%;
}
50% {
top: -23%;
}
100% {
top: 25%;
}
}
@keyframes small-drop {
0% {
top: 25%;
}
50% {
top: -23%;
}
100% {
top: 25%;
}
}
.ripple {
height: 25px;
width: 25px;
border-radius: 50%;
overflow: hidden;
background-color: #27AE60;
position: absolute;
top: 0;
}
.ripple.l-side {
left: 50%;
-webkit-animation: l-side-ripple 2s ease infinite 1.2s;
-moz-animation: l-side-ripple 2s ease infinite 1.2s;
animation: l-side-ripple 2s ease infinite 1.2s;
}
.ripple.r-side {
left: 53%;
-webkit-animation: r-side-ripple 2s ease infinite 1.2s;
-moz-animation: r-side-ripple 2s ease infinite 1.2s;
animation: r-side-ripple 2s ease infinite 1.2s;
}
@-webkit-keyframes l-side-ripple {
0% {
left: 51%;
top: -30px;
}
25% {
left: 25%;
top: 0;
}
49% {
top: 0;
}
50% {
left: 51%;
top: -25px;
}
75% {
left: 35%;
top: 0;
}
99% {
left: 35%;
top: 0;
}
100% {
left: 51%;
top: -30px;
}
}
@-moz-keyframes l-side-ripple {
0% {
left: 51%;
top: -30px;
}
25% {
left: 25%;
top: 0;
}
49% {
top: 0;
}
50% {
left: 51%;
top: -25px;
}
75% {
left: 35%;
top: 0;
}
99% {
left: 35%;
top: 0;
}
100% {
left: 51%;
top: -30px;
}
}
@keyframes l-side-ripple {
0% {
left: 51%;
top: -30px;
}
25% {
left: 25%;
top: 0;
}
49% {
top: 0;
}
50% {
left: 51%;
top: -25px;
}
75% {
left: 35%;
top: 0;
}
99% {
left: 35%;
top: 0;
}
100% {
left: 51%;
top: -30px;
}
}
@-webkit-keyframes r-side-ripple {
0% {
left: 53%;
top: -30px;
}
25% {
left: 75%;
top: 0;
}
49% {
top: 0;
}
50% {
left: 53%;
top: -25px;
}
75% {
left: 65%;
top: 0;
}
99% {
top: 0;
}
100% {
left: 53%;
top: -30px;
}
}
@-moz-keyframes r-side-ripple {
0% {
left: 53%;
top: -30px;
}
25% {
left: 75%;
top: 0;
}
49% {
top: 0;
}
50% {
left: 53%;
top: -25px;
}
75% {
left: 65%;
top: 0;
}
99% {
top: 0;
}
100% {
left: 53%;
top: -30px;
}
}
@keyframes r-side-ripple {
0% {
left: 53%;
top: -30px;
}
25% {
left: 75%;
top: 0;
}
49% {
top: 0;
}
50% {
left: 53%;
top: -25px;
}
75% {
left: 65%;
top: 0;
}
99% {
top: 0;
}
100% {
left: 53%;
top: -30px;
}
}
/*== Circle Loader ==*/
/* Soft fade-in for overlay */
@-webkit-keyframes bg-fade {
from{ opacity: 0; }
to{ opacity: 1; }
}
@keyframes bg-fade {
from{ opacity: 0; }
to{ opacity: 1; }
}
.loading-overlay{
display: none; /* Should be triggered with JS */
}
.loading-overlay .name{
-webkit-transform:translate(-50%,-50%);
height:50px;
width:50px;
position:absolute;
top: 46.5%;
left: 50.5%;
}
/* position circle container */
.loading-circles{
position:absolute;
left:50%;
top:45%;
}
/* grow and fade animation
for .circle rings */
@-webkit-keyframes fade {
from{
opacity:1;
-webkit-transform:scale(1,1)translate(-50%,-50%);
}
to{
opacity:0;
-webkit-transform:scale(2,2)translate(-50%,-50%);
}
}
@keyframes fade {
from{
opacity:1;
transform:scale(1,1)translate(-50%,-50%);
}
to{
opacity:0;
transform:scale(2,2)translate(-50%,-50%);
}
}
/* style circle starting point */
.loading-circles>.circle{
position:absolute;
-webkit-transform-origin:0 0;
transform-origin:0 0; /* radiate from center */
-webkit-transform:scale(1,1)translate(-50%,-50%);
transform:scale(1,1)translate(-50%,-50%);
-webkit-animation:fade 1s linear infinite;
animation:fade 1s linear infinite;
display:inline-block;
height:45px;
width:45px;
border-radius:50%;
background:#ffffff;
opacity:1;
}
.loading-circles.color>.circle{
background:#27AE20;
}
/* Turn off animation for .hold */
.circle.hold{
-webkit-animation:none;
}
/* Iterate sequntially animation-delay */
.circle.first+.circle{
-webkit-animation-delay:.33s;
animation-delay:.33s;
}
.circle.first+.circle+.circle{
-webkit-animation-delay:.66s;
animation-delay:.66s;
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|