amadeusMozart
Nebraska soon to be Neverland
- Joined
- Jul 27, 2015
Sweet 30 second timer. What to do to kill 30 seconds? umm...maybe write code? 
-
Controversial Topics
Several months ago, I added a private sub-forum to allow members to discuss these topics without fear of infractions or banning. It's opt-in, opt-out. Corey Click Here
Just getting to 10
- Thread starter Habibi8504
- Start date
amadeusMozart
Nebraska soon to be Neverland
- Joined
- Jul 27, 2015
If you want a very cool space Animation background for a webpage.
body {
background-color: black;
/* Firefox */
background-image:
-moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px),
-moz-radial-gradient(circle, #FFFFFF 1px, rgba(255,186,170,.4) 3px, transparent 30px),
-moz-radial-gradient(ellipse, rgba(255,255,255,.9) 1px, rgba(251,255,186,.3) 2px, transparent 40px),
-moz-radial-gradient(ellipse, rgba(255,255,255,.4), rgba(253,255,219,.2) 1px, transparent 30px);
/* Webkit */
background-image:
-webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(white), color-stop(0.1, rgba(255,186,170,.4)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 40, from(rgba(255,255,255,.9)), color-stop(0.05, rgba(251,255,186,.3)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30, from(rgba(255,255,255,.4)), color-stop(0.03, rgba(253,255,219,.2)), to(transparent));
/* Background Attributes */
background-size: 550px 550px, 350px 350px, 250px 270px, 220px 200px;
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
/* Animation */
animation-name: movement;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
/* Firefox */
-moz-animation-name: movement;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
/* Webkit */
-webkit-animation-name: movement;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
@-moz-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
@-webkit-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
#footer {
position:absolute;
bottom:0;
color: darkgreen;
}
body {
background-color: black;
/* Firefox */
background-image:
-moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px),
-moz-radial-gradient(circle, #FFFFFF 1px, rgba(255,186,170,.4) 3px, transparent 30px),
-moz-radial-gradient(ellipse, rgba(255,255,255,.9) 1px, rgba(251,255,186,.3) 2px, transparent 40px),
-moz-radial-gradient(ellipse, rgba(255,255,255,.4), rgba(253,255,219,.2) 1px, transparent 30px);
/* Webkit */
background-image:
-webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(white), color-stop(0.1, rgba(255,186,170,.4)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 40, from(rgba(255,255,255,.9)), color-stop(0.05, rgba(251,255,186,.3)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30, from(rgba(255,255,255,.4)), color-stop(0.03, rgba(253,255,219,.2)), to(transparent));
/* Background Attributes */
background-size: 550px 550px, 350px 350px, 250px 270px, 220px 200px;
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
/* Animation */
animation-name: movement;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
/* Firefox */
-moz-animation-name: movement;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
/* Webkit */
-webkit-animation-name: movement;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
@keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
@-moz-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
@-webkit-keyframes movement
{
from {
background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}
to {
background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
}
}
#footer {
position:absolute;
bottom:0;
color: darkgreen;
}
amadeusMozart
Nebraska soon to be Neverland
- Joined
- Jul 27, 2015
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Main</title>
</head>
<body>
<footer id="footer">
<a href="index.html">Home Page</a>
<p>Posted by: amaduesMozart</p>
<p>Contact information: <a href="mailto:an.email.adress@gmail.com">an.email.adress@gmail.com</a>.</p>
</footer>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Main</title>
</head>
<body>
<footer id="footer">
<a href="index.html">Home Page</a>
<p>Posted by: amaduesMozart</p>
<p>Contact information: <a href="mailto:an.email.adress@gmail.com">an.email.adress@gmail.com</a>.</p>
</footer>
</body>
</html>
amadeusMozart
Nebraska soon to be Neverland
- Joined
- Jul 27, 2015
Why amadeusMozart? Because Wolfgang Amadeus Mozart was a great composer.
amadeusMozart
Nebraska soon to be Neverland
- Joined
- Jul 27, 2015
can you solve it? Many have tried.
amadeusMozart
Nebraska soon to be Neverland
- Joined
- Jul 27, 2015
Now lets see if I can see my signature?
amadeusMozart
Nebraska soon to be Neverland
- Joined
- Jul 27, 2015
guess that was a BIG NO!!
amadeusMozart
Nebraska soon to be Neverland
- Joined
- Jul 27, 2015
Here we goo!
abbey_maree
Disney Villain
- Joined
- May 17, 2015
I need to up my post count too, I need a pretty avatar!
old feller
DIS Veteran
- Joined
- Aug 13, 2015
DisneyFunFamily5
Earning My Ears
- Joined
- Aug 19, 2015
test 1
Share this page
GET A DISNEY VACATION QUOTE
Dreams Unlimited Travel is committed to providing you with the very best vacation planning experience possible. Our Vacation Planners are experts and will share their honest advice to help you have a magical vacation.
Let us help you with your next Disney Vacation!
Dreams Unlimited Travel is committed to providing you with the very best vacation planning experience possible. Our Vacation Planners are experts and will share their honest advice to help you have a magical vacation.
Let us help you with your next Disney Vacation!
