I'm making a Solar System for school, and I am unable to fully Scroll left and up far enough to see the whole thing. Just to clarify, I am using Safari, and Google Chrome made the problem worse.
html, body {
width: 100%;
height: 100%;
background: url(http://images.kaneva.com/filestore9/4523625/6569743/starryUnightUtexture.jpg) repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transform: scale(1.2);
transform-origin: 50% 50%;
}
body {
width: 1000px;
height: 1000px;
}
div {
width: 500%;
margin: 0 inherit;
}
#sun {
position: absolute;
top: 50%;
left: 50%;
height: 300px;
width: 300px;
margin-top: -150px;
margin-left: -155px;
box-shadow: 0 0 0px red;
}
#mercury {
/* Style your earth */
position: absolute;
top: 13.5%;
left: 13.5%;
width: 10px;
}
#mercury-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 4.81s linear infinite;
-moz-animation: spin-right 4.81s linear infinite;
-ms-animation: spin-right 4.81s linear infinite;
-o-animation: spin-right 4.81s linear infinite;
animation: spin-right 4.81s linear infinite;
}
#venus {
/* Style your earth */
position: absolute;
top: 13.6%;
left: 13.6%;
width: 15px;
}
#venus-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 900px;
height: 900px;
margin-top: -450px;
margin-left: -450px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 12.3s linear infinite;
-moz-animation: spin-right 12.3s linear infinite;
-ms-animation: spin-right 12.3s linear infinite;
-o-animation: spin-right 12.3s linear infinite;
animation: spin-right 12.3s linear infinite;
}
#earth {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#earth-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 1200px;
height: 1200px;
margin-top: -600px;
margin-left: -600px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 20s linear infinite;
-moz-animation: spin-right 20s linear infinite;
-ms-animation: spin-right 20s linear infinite;
-o-animation: spin-right 20s linear infinite;
animation: spin-right 20s linear infinite;
}
#mars {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#mars-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 1600px;
height: 1600px;
margin-top: -800px;
margin-left: -800px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 37.6s linear infinite;
-moz-animation: spin-right 37.6s linear infinite;
-ms-animation: spin-right 37.6s linear infinite;
-o-animation: spin-right 37.6s linear infinite;
animation: spin-right 37.6s linear infinite;
}
#-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#asteroid1 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid2 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid3 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid4 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid5 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid6 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid7 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid8 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid9 {
/* Style your earth */
position: absolute;
top: 13.8%;
left: 13.8%;
width: 20px;
}
#asteroid-orbit1 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 20s linear infinite;
-moz-animation: spin-right 20s linear infinite;
-ms-animation: spin-right 20s linear infinite;
-o-animation: spin-right 20s linear infinite;
animation: spin-right 20s linear infinite;
}
#asteroid-orbit2 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 23s linear infinite;
-moz-animation: spin-right 23s linear infinite;
-ms-animation: spin-right 23s linear infinite;
-o-animation: spin-right 23s linear infinite;
animation: spin-right 23s linear infinite;
}
#asteroid-orbit3 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 26s linear infinite;
-moz-animation: spin-right 26s linear infinite;
-ms-animation: spin-right 26s linear infinite;
-o-animation: spin-right 26s linear infinite;
animation: spin-right 26s linear infinite;
}
#asteroid-orbit4 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 29s linear infinite;
-moz-animation: spin-right 29s linear infinite;
-ms-animation: spin-right 29s linear infinite;
-o-animation: spin-right 29s linear infinite;
animation: spin-right 29s linear infinite;
}
#asteroid-orbit5 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 32s linear infinite;
-moz-animation: spin-right 32s linear infinite;
-ms-animation: spin-right 32s linear infinite;
-o-animation: spin-right 32s linear infinite;
animation: spin-right 32s linear infinite;
}
#asteroid-orbit6 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 35s linear infinite;
-moz-animation: spin-right 35s linear infinite;
-ms-animation: spin-right 35s linear infinite;
-o-animation: spin-right 35s linear infinite;
animation: spin-right 35s linear infinite;
}
#asteroid-orbit7 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 38s linear infinite;
-moz-animation: spin-right 38s linear infinite;
-ms-animation: spin-right 38s linear infinite;
-o-animation: spin-right 38s linear infinite;
animation: spin-right 38s linear infinite;
}
#asteroid-orbit8 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 41s linear infinite;
-moz-animation: spin-right 41s linear infinite;
-ms-animation: spin-right 41s linear infinite;
-o-animation: spin-right 41s linear infinite;
animation: spin-right 41s linear infinite;
}
#asteroid-orbit9 {
position: absolute;
top: 50%;
left: 50%;
width: 1900px;
height: 1900px;
margin-top: -950px;
margin-left: -950px;
border-width: 0px;
border-style: solid;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 43s linear infinite;
-moz-animation: spin-right 43s linear infinite;
-ms-animation: spin-right 43s linear infinite;
-o-animation: spin-right 43s linear infinite;
animation: spin-right 43s linear infinite;
}
#-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#jupiter {
/* Style your earth */
position: absolute;
top: 13.6%;
left: 13.6%;
width: 80px;
}
#jupiter-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 3600px;
height: 3600px;
margin-top: -1800px;
margin-left: -1800px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 237s linear infinite;
-moz-animation: spin-right 237s linear infinite;
-ms-animation: spin-right 237s linear infinite;
-o-animation: spin-right 237s linear infinite;
animation: spin-right 237s linear infinite;
}
#saturn {
/* Style your earth */
position: absolute;
top: 12.98%;
left: 12.98%;
width: 160px;
}
#saturn-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 4800px;
height: 4800px;
margin-top: -2400px;
margin-left: -2400px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 588.9s linear infinite;
-moz-animation: spin-right 588.9s linear infinite;
-ms-animation: spin-right 588.9s linear infinite;
-o-animation: spin-right 588.9s linear infinite;
animation: spin-right 588.9s linear infinite;
}
#uranus {
/* Style your earth */
position: absolute;
top: 13.3%;
left: 13.3%;
width: 160px;
}
#uranus-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 5800px;
height: 5800px;
margin-top: -2900px;
margin-left: -2900px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 1680.3s linear infinite;
-moz-animation: spin-right 1680.3s linear infinite;
-ms-animation: spin-right 1680.3s linear infinite;
-o-animation: spin-right 1680.3s linear infinite;
animation: spin-right 1680.3s linear infinite;
}
<html>
<head>
<link rel="stylesheet" href="inner.css" />
<link rel="stylesheet" href="outer.css" />
</head>
<center>
<body>
<!-- Right below is an image of the sun -->
<img id="sun" src="http://www.spiritofexploration.com/images/sun2.png">
<!-- Insert the 'earth' on the next line -->
<div id="mercury-orbit">
<img id="mercury" src="http://www.soulconnections.net/wp-content/uploads/2014/06/mercury.gif">
</div>
<div id="venus-orbit">
<img id="venus" src="http://www.solstation.com/stars/venus.gif">
</div>
<div id="earth-orbit">
<img id="earth" src="http://www.fresnostate.edu/csm/ees/images/earth.jpg">
</div>
<div id="mars-orbit">
<img id="mars" src="http://quest.nasa.gov/mars/background/images/mars.gif">
</div>
<div id="asteroid-orbit1">
<img id="asteroid1" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit2">
<img id="asteroid2" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit3">
<img id="asteroid3" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit4">
<img id="asteroid4" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit5">
<img id="asteroid5" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit6">
<img id="asteroid6" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit7">
<img id="asteroid7" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit8">
<img id="asteroid8" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="asteroid-orbit9">
<img id="asteroid9" src="http://www.asteroidapp.com/images/asteroid.png">
</div>
<div id="jupiter-orbit">
<img id="jupiter" src="http://fc09.deviantart.net/fs70/f/2014/073/f/9/jupiter_by_kalin1998-d7a71xe.gif">
</div>
<div id="saturn-orbit">
<img id="saturn" src="http://space-facts.com/wp-content/uploads/saturn.png">
</div>
<div id="uranus-orbit">
<img id="uranus" src="http://moonlinks.net/wp-content/uploads/2012/04/uranus.png">
</div>
</body>
</center>
</html>
Any help would be helpful. To be specific, it is mostly the 9 Asteroid orbits, and the orbits of Jupiter, Saturn, and Uranus that need the most help.
You need to do at least 2 things:
Make body bigger; at least 6000px x 6000px
Put the center of each orbit at (3000px, 3000px)
You'll need to scroll around to see things, but everything will be reachable.
Related
I want to show login form on the top of cloud bakground. I copy cloud backgroud script from this link . In css .cloud I change position from relative to absolute but login form not move on the top of cloud.
This is my code I paste cloud backgroud script before login form.
* {
margin: 0;
padding: 0;
}
body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}
#clouds {
padding: 100px 0;
#background: #c9dbe9;
#background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
#background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
#background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
/*Time to finalise the cloud shape*/
.cloud {
width: 200px;
height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: absolute;
}
.cloud:before,
.cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px;
height: 80px;
position: absolute;
top: -15px;
left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px;
height: 120px;
top: -55px;
left: auto;
right: 15px;
}
/*Time to animate*/
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
/*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px;
top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px;
top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-o-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
<div id="clouds">
<div class="cloud x1"></div>
<!-- Time for multiple clouds to dance around -->
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<!-- ************ This is my login form ************ -->
<div id="authloginContainer">
<div class="authloginTabContent" authpluginarray="1,2,3" modelnum="0">
<div class="authmodel authmodel_0 blueColorContainer">
<p> </p>
<div class="marbom6 usernameContainer">
<p class="pContainer authinputwidth">
<label></label>
<input id="username" value="Account" emptytip="Account" type="text" class="frm-input"></p>
</div>
<div class="marbom6 passwordContainer" style="margin-bottom: 0;">
<p class="center pContainer authinputwidth">
<label></label>
<input id="password" value="Password" emptytip="Password" type="text" class="frm-input"></p>
</div>
<div class="rmbPwdContainer" style="display: none;margin: 0 auto;width: 270px;">
<p class="center yaHei" style="text-align:left;padding-left: 24px;">
<input id="rememberPwd" name="rememberPwd" type="checkbox" savetime="14" onclick="selectRememberPwd()" class="remPwdInp">Remember password</p>
</div>
<div class="validcodeContainer authenticationcodeContainer" style="margin-top: 10px; display: block;">
<p class="pContainer authinputwidth">
<input id="validCode" value="Verification code" type="text" class="frm-input" onkeydown="subLoginCheck()" data-type="" style="" emptytip="Verification code" validcodecomplex="2" validcodelength="4"></p>
</div>
<p style="margin-top: 5px; text-align: center">
<input id="loginBtn" type="button" value="Log In" class="frm-button borderRadius4" style="background-color: #95F4FF; border-color: #95F4FF;" onclick="login()"></p>
</p>
<p> </p>
</div>
</div>
</div>
How to show login form on the top of cloud background ?
Change the position of the form :)
Something like this
#authloginContainer {
position: fixed;
width: 200px;
top: 50px;
left: calc(50% - 100px);
}
* {
margin: 0;
padding: 0;
}
body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}
#clouds {
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
#authloginContainer {
position: fixed;
width: 200px;
top: 50px;
left: calc(50% - 100px);
}
/*Time to finalise the cloud shape*/
.cloud {
width: 200px;
height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: absolute;
}
.cloud:before,
.cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px;
height: 80px;
position: absolute;
top: -15px;
left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px;
height: 120px;
top: -55px;
left: auto;
right: 15px;
}
/*Time to animate*/
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
/*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px;
top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px;
top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
/*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
#-webkit-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-o-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
<div id="clouds">
<div class="cloud x1"></div>
<!-- Time for multiple clouds to dance around -->
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<!-- ************ This is my login form ************ -->
<div id="authloginContainer">
<div class="authloginTabContent" authpluginarray="1,2,3" modelnum="0">
<div class="authmodel authmodel_0 blueColorContainer">
<p> </p>
<div class="marbom6 usernameContainer">
<p class="pContainer authinputwidth">
<label></label>
<input id="username" value="Account" emptytip="Account" type="text" class="frm-input"></p>
</div>
<div class="marbom6 passwordContainer" style="margin-bottom: 0;">
<p class="center pContainer authinputwidth">
<label></label>
<input id="password" value="Password" emptytip="Password" type="text" class="frm-input"></p>
</div>
<div class="rmbPwdContainer" style="display: none;margin: 0 auto;width: 270px;">
<p class="center yaHei" style="text-align:left;padding-left: 24px;">
<input id="rememberPwd" name="rememberPwd" type="checkbox" savetime="14" onclick="selectRememberPwd()" class="remPwdInp">Remember password</p>
</div>
<div class="validcodeContainer authenticationcodeContainer" style="margin-top: 10px; display: block;">
<p class="pContainer authinputwidth">
<input id="validCode" value="Verification code" type="text" class="frm-input" onkeydown="subLoginCheck()" data-type="" style="" emptytip="Verification code" validcodecomplex="2" validcodelength="4"></p>
</div>
<p style="margin-top: 5px; text-align: center">
<input id="loginBtn" type="button" value="Log In" class="frm-button borderRadius4" style="background-color: #95F4FF; border-color: #95F4FF;" onclick="login()"></p>
</p>
<p> </p>
</div>
</div>
</div>
I would like to use this image slider: http://codepen.io/rslglover/pen/DBvoA
The image slider works well, but when its finish, it stops. I can't see whats the difference is from the CodePen codes, and what I've done. How can it be it works in the CodePen link?
article{
position: absolute;
left: 450px;
background: #292929;
color: #e3e3e3;
width: 450px;
height: 450px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 0px;
}
article:nth-of-type(1){
animation: slideIn 50s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 50s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 50s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 50s linear 15s infinite;
}
article:nth-of-type(5){
animation: slideIn 50s linear 20s infinite;
}
article:nth-of-type(6){
animation: slideIn 50s linear 25s infinite;
}
article:nth-of-type(7){
animation: slideIn 50s linear 30s infinite;
}
article:nth-of-type(8){
animation: slideIn 50s linear 35s infinite;
}
article:nth-of-type(9){
animation: slideIn 50s linear 40s infinite;
}
article:nth-of-type(10){
animation: slideIn 50s linear 45s infinite;
}
#keyframes slideIn{
0% {left: 450px;}
1% {left: 0;}
10% {left: 0;}
11% {left: -450px;}
100%{left: -450px;}
}
.galleryImg {
height: 450px;
width: 450px;
}
.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff;
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}
And my html
<div class="galleryInfo">
<div class="gallery">
<article><img class="galleryImg" src="images/aa2.png" alt=""></article>
<article> <img class="galleryImg" src="images/aa1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb2.png" alt=""></article>
</div>
</div>
Check this out:
HTML:
<div class="galleryInfo">
<div class="gallery">
<section>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
</section>
</div>
</div>
CSS:
html{
background: #aaa;
}
section{
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 1em;
margin-left: -100px;
overflow: hidden;
background: #292929;
border: 10px solid #fff;
}
/*section:hover article{
animation-play-state: paused;
}*/
article{
position: absolute;
left: 450px;
background: #292929;
color: #e3e3e3;
width: 450px;
height: 450px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 0px;
}
.galleryImg {
height: 450px;
width: 450px;
}
.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff;
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}
article:nth-of-type(1){
animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 20s linear 15s infinite;
}
#keyframes slideIn{
0% {left: 200px;}
1% {left: 0;}
10% {left: 0;}
11% {left: -200px;}
100%{left: -200px;}
}
Or change position in css file clas galleryInfo and gallery above animation.
The primary reason why your animation appears to stop, is because the CSS is structured for 10 slides.
To maintain the same duration and animation, the keyframes percentages need to be configured for the new total number of slides you are using.
#keyframes slideIn{
0% {left: 200px;} /* Always 0% */
2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */
25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */
27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */
100%{left: -200px;} /* Always 100% */
}
By changing the keyframes, you will maintain the same slide speed as your codepen example had.
Here is a working snippet.
html{
background: #aaa;
}
section{
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 1em;
margin-left: -100px;
overflow: hidden;
background: #292929;
border: 10px solid #fff;
}
/*section:hover article{
animation-play-state: paused;
}*/
article{
position: absolute;
left: 200px;
background: #292929;
color: #e3e3e3;
width: 200px;
height: 200px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 80px;
}
/*
* As each slide's animation is 5s, the set duration is totalSlides * 5.
*/
article:nth-of-type(1){
animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 20s linear 15s infinite;
}
#keyframes slideIn{
0% {left: 200px;} /* Always 0% */
2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */
25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */
27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */
100%{left: -200px;} /* Always 100% */
}
<section>
<article>Slide 1</article>
<article>Slide 2</article>
<article>Slide 3</article>
<article>Slide 4</article>
</section>
I have successfully made my animation banner, but I need to repeat the entire animation from the beginning for an infinite times. But animation iteration count infinite is not working for me because I have individual animations for all my children elements(3 birds, 2 texts). Can anyone help me, how can I repeat the entire animation from the beginning again and again?
My PEN
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="canvas">
<h2 class="bye">Good Bye</h2>
<div class="canvas-inner">
<div class="text">Welcome</div>
<img class="people" src="https://i.imgsafe.org/9967e45cc8.png" alt="">
<img class="bird-1" src="https://i.imgsafe.org/996ac926a0.png" alt="">
<img class="bird-2" src="https://i.imgsafe.org/996bc03236.png" alt="">
<img class="bird-3" src="https://i.imgsafe.org/996cfb24a4.png" alt="">
</div>
</div>
</body>
</html>
CSS
body{
margin: 0;
}
.canvas{
background-color: lightgrey;
width: 300px;
height: 250px;
position: relative;
left: 30%;
top: 20%;
overflow: hidden;
}
.canvas-inner{
opacity:1;
animation-name: final;
animation-duration: 6s;
animation-timing-function: linear;
animation-delay: 3s;
animation-fill-mode: forwards;
}
.bye{
position: absolute;
left:0;
right:0;
margin:0 auto;
width:120px;
top: -50px;
-webkit-animation: bye 2s 6s linear forwards;
}
.logo,
.people{
position: absolute;
}
.text{
position: absolute;
right: -100px;
top: 50px;
-webkit-animation: text 2s 2s linear forwards;
}
.bird-1{
position: absolute;
width: 50px;
-webkit-animation: first 2s linear forwards;
animation: first 2s linear forwards;
top: -70px;
left: 55px;
}
.bird-2{
position: absolute;
width: 50px;
-webkit-animation: second 2s linear forwards;
animation: second 2s linear forwards;
top: 165px;
left: -50px;
}
.bird-3{
position: absolute;
width: 50px;
-webkit-animation: third 2s linear forwards;
animation: third 2s linear forwards;
top: 163px;
right: -50px;
transform: rotateY(180deg);
}
#-webkit-keyframes first{
0%{top: -70px;}
100%{top:65px;}
}
#-webkit-keyframes second{
0%{left: -50px;}
100%{left:15px;}
}
#-webkit-keyframes third{
0%{right: -50px;}
100%{right:135px;}
}
#-webkit-keyframes text{
0%{right:-100px;}
100%{right:50px;}
}
#-webkit-keyframes bye{
0%{top:-50px;}
100%{top:110px;}
}
#-webkit-keyframes final{
0%{opacity:1;}
100%{opacity:0;}
}
I am using CSS to flip images to make them look like they flip in.
This works in all browsers but safari. Please open this link in chrome or firefox where it appears correctly, then please open it in safari:
http://project-awesome.id-staging.com/SO-test/index.html
Here is my CSS:
KEYFRAMES
#-moz-keyframes spin { 100% {opacity:1; -moz-transform: rotateY(180deg); } }
#-webkit-keyframes spin { 100% {opacity:1; -webkit-transform: rotateY(180deg); } }
#keyframes spin { 100% {opacity:1; -webkit-transform: rotateY(180deg); transform:rotateY(180deg); } }
#-moz-keyframes spin2 { 100% {opacity:1; -moz-transform: rotateY(180deg); } }
#-webkit-keyframes spin2 { 100% {opacity:1; transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:100% 0 0; } }
#keyframes spin2 { 100% {opacity:1; transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:100% 0 0; } }
#-moz-keyframes spin3 { 100% { opacity:1; transform:rotateX(-180deg); -webkit-transform-origin:0 100% 0; transform-origin:0 100% 0; } }
#-webkit-keyframes spin3 { 100% { opacity:1; transform:rotateX(-180deg); -webkit-transform-origin:0 100% 0; transform-origin:0 100% 0; } }
#keyframes spin3 { 100% { opacity:1; transform:rotateX(-180deg); -webkit-transform-origin:0 100% 0; transform-origin: 0 100% 0; } }
#-moz-keyframes spin5 { 100% { opacity:1; transform:rotateX(180deg); -webkit-transform-origin: 0 0 100% 0; transform-origin:100% 0 0 } }
#-webkit-keyframes spin5 { 100% { opacity:1; transform:rotateX(180deg); -webkit-transform-origin:0 0 100% 0; transform-origin:0 0 100% 0; } }
#keyframes spin5 { 100% { opacity:1; transform:rotateX(180deg); -webkit-transform-origin: 0 0 100% 0 ; transform-origin: 0 0 100% 0; } }
#-moz-keyframes spin4 { 100% {opacity:1; -moz-transform: rotateY(-180deg); } }
#-webkit-keyframes spin4 { 100% {opacity:1; transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:0 100% 0; } }
#keyframes spin4 { 100% {opacity:1; transform:rotateY(-180deg); -webkit-transform-origin:100% 0 0; transform-origin:0 100% 0; } }
Each image flip:
.front-1 {
position: absolute;
left: -65px;
top: 54px;
width: 72px;
height: 72px;
opacity:0;
-webkit-animation:spin2 0.5s 0.5s linear forwards;
-moz-animation:spin2 0.5s 0.5s linear forwards;
animation:spin2 0.5s 0.5s linear forwards;
}
.front-2 {
position: absolute;
left: 7px;
top: 54px;
width: 72px;
height: 72px;
z-index:-94;
opacity:0;
-webkit-animation:spin2 0.5s 1.2s linear forwards;
-moz-animation:spin2 0.5s 1.2s linear forwards;
animation:spin2 0.5s 1.2s linear forwards;
}
.front-3 {
position: absolute;
left: -65px;
top: 374px;
width: 72px;
height: 72px;
opacity:0;
-webkit-animation:spin2 0.5s 1.5s linear forwards;
-moz-animation:spin2 0.5s 1.5s linear forwards;
animation:spin2 0.5s 1.5s linear forwards;
}
.front-4 {
position: absolute;
left: 7px;
top: 374px;
width: 72px;
height: 72px;
z-index:-95;
opacity:0;
-webkit-animation: spin2 0.5s 2.0s linear forwards;
-moz-animation:spin2 0.5s 2.0s linear forwards;
animation:spin2 0.5s 2.0s linear forwards;
}
.front-5 {
position: absolute;
left: 79px;
top: 446px;
width: 72px;
height: 72px;
opacity:0;
}
.front-6 {
position: absolute;
left: 79px;
top: 374px;
width: 72px;
height: 72px;
z-index:-96;
opacity: 0;
-webkit-animation:spin3 0.5s 2.5s linear forwards;
-moz-animation:spin3 .0.5s 2.5s linear forwards;
animation:spin3 0.5s 2.5s linear forwards;
}
.front-7 {
position: absolute;
left: 79px;
top: 518px;
width: 72px;
height: 72px;
z-index:-99;
opacity:0;
-webkit-animation:spin4 0.5s 3.5s linear forwards;
-moz-animation:spin4 0.5s 3.5s linear forwards;
animation:spin4 0.5s 3.5s linear forwards;
}
.front-8 {
position: absolute;
left: 79px;
top: 446px;
width: 72px;
height: 72px;
z-index:-98;
opacity:0;
-webkit-animation:spin3 0.5s 3.0s linear forwards;
-moz-animation:spin3 0.5s 3.0s linear forwards;
animation:spin3 0.5s 3.0s linear forwards;
}
/* BACK IMAGE CLASSES */
.back-1 {
position: absolute;
left: 79px;
top: 54px;
width: 72px;
height: 72px;
opacity:0;
-webkit-animation:spin 0.5s 7s linear forwards;
-moz-animation:spin 0.5s 7s linear forwards;
animation:spin 0.5s 7s linear forwards;
}
.back-2 {
position: absolute;
left: 79px;
top: 54px;
width: 72px;
height: 72px;
opacity:0;
}
.back-3 {
position: absolute;
left: 79px;
top: 374px;
width: 72px;
height: 72px;
opacity:0;
-webkit-animation:spin4 0.5s 5.5s linear forwards;
-moz-animation:spin4 0.5s 5.5s linear forwards;
animation:spin4 0.5s 5.5s linear forwards;
}
.back-4 {
position: absolute;
left: 79px;
top: 374px;
width: 72px;
height: 72px;
opacity:0;
-webkit-animation:spin5 0.5s 6s linear forwards;
-moz-animation:spin5 0.5s 6s linear forwards;
animation:spin5 0.5s 6s linear forwards;
}
.back-5 {
position: absolute;
left: 7px;
top: 446px;
width: 72px;
height: 72px;
opacity:0;
}
.back-6 {
position: absolute;
left: 79px;
top: 446px;
width: 72px;
height: 72px;
opacity:0;
-webkit-animation:spin5 0.5s 4.5s linear forwards;
-moz-animation:spin5 0.5s 4.5s linear forwards;
animation:spin5 0.5s 4.5s linear forwards;
}
.back-7 {
position: absolute;
left: 7px;
top: 518px;
width: 72px;
height: 72px;
opacity:0;
z-index:80;
-webkit-animation:spin 0.5s 4s linear forwards;
-moz-animation:spin 0.5s 4s linear forwards;
animation:spin 0.5s 4s linear forwards;
}
.back-8 {
position: absolute;
left: 7px;
top: 518px;
width: 72px;
height: 72px;
opacity:0;
z-index:-81;
-webkit-animation:spin2 0.5s 5s linear forwards;
-moz-animation:spin2 0.5s 5s linear forwards;
animation:spin2 0.5s 5s linear forwards;
}
Any ideas are highly appreciated.
Thanks in advance
you forgot the -webkit- prefix in some of your transforms in the #-webkit-keyframes blocks.
i wont go over everything, but you should lookup sections like this:
#-webkit-keyframes spin2 {
100% {
opacity:1;
transform:rotateY(-180deg);
-webkit-transform-origin:100% 0 0;
transform-origin:100% 0 0;
}
}
and add the -webkit- prefix to the rotation transformation as well.
I'm trying to learn animation and keyframes in CSS3, and I wonder how I can make #moon-orbit orbit around #earth? Like it does in real life, you know.
html, body {
background-color : #000000;
height : 90%;
width : 90%;
}
#sun {
background-color : #ba8f27;
border-radius : 200px;
box-shadow : 0 0 128px red;
margin-top : -100px;
margin-left : -100px;
left : 50%;
height : 200px;
position : absolute;
top : 50%;
width : 200px;
}
#earth-orbit {
border: 2px solid #373737;
border-radius: 50%;
left: 50%;
height: 500px;
margin-top: -250px;
margin-left: -250px;
position: absolute;
top: 50%;
width: 500px;
-webkit-animation: spin-right 10s linear infinite;
-moz-animation: spin-right 10s linear infinite;
-ms-animation: spin-right 10s linear infinite;
-o-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
#moon-orbit {
border-radius: 50%;
left: 50%;
height: 500px;
margin-top: -250px;
margin-left: -250px;
position: absolute;
top: 50%;
width: 500px;
transform: rotate(360deg);
transform-origin: 50% 100%;
}
#earth {
background-color : #2d7ddc;
border-radius : 50px;
margin-left : -25px;
margin-top : -25px;
height : 50px;
left : 50%;
position : absolute;
top : 0%;
width : 50px;
}
#moon {
background-color : #b2b2b2;
border-radius : 50px;
margin-left : -25px;
margin-top : -25px;
height : 16px;
left : 43%;
position : absolute;
top : 0%;
width : 16px;
}
#-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
}
}
<div id="sun"></div>
<div id="earth-orbit">
<div id="earth"></div>
<div id="moon-orbit">
<div id="moon"></div>
</div>
</div>
jsFiddle demo
You can add a holder for the moon and positioned it in the center of the earth and rotate that div:
Demo
Added stuff:
HTML:
<div class="moon-holder">
<div id="moon"></div>
</div>
CSS:
.moon-holder {
position: absolute;
left: 50%;
top: 0;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
-webkit-animation: spin-right 5s linear infinite;
-moz-animation: spin-right 5s linear infinite;
-ms-animation: spin-right 5s linear infinite;
-o-animation: spin-right 5s linear infinite;
animation: spin-right 5s linear infinite;
}