Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
CSS
html { min-height: 100%; background: -webkit-radial-gradient(center, ellipse cover, rgba(41,42,45,0) 0%,rgba(0,0,0,0.3) 100%), url('http://i.imgur.com/6HOUPG4.jpg'); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(41,42,45,0) 0%,rgba(0,0,0,0.3) 100%), url('http://i.imgur.com/6HOUPG4.jpg'); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(41,42,45,0) 0%,rgba(0,0,0,0.3) 100%), url('http://i.imgur.com/6HOUPG4.jpg'); /* IE10+ */ background: -moz-radial-gradient(center, ellipse cover, rgba(41,42,45,0) 0%,rgba(0,0,0,0.3) 100%), url('http://i.imgur.com/6HOUPG4.jpg'); /* Firefox */ background: radial-gradient(center, ellipse cover, rgba(41,42,45,1) 0%,rgba(0,0,0,0.3) 100%), url('http://i.imgur.com/6HOUPG4.jpg'); /* W3C */ background-size: cover; } ul { margin: auto; height: 300px; width: 460px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; list-style: none; padding: 0; } li { display: block; float: left; width: 60px; height: 70px; margin-right: -20px; background-color: rgba(255,255,0,1); -webkit-animation: rainbow 3s infinite, bounce 3s ease infinite; -moz-animation: rainbow 3s infinite, bounce 3s ease infinite; box-shadow: inset 0px 0px 10px rgba(255,255,255,0.5), 0px 0px 10px rgba(255,255,255,0.5); position: relative; border-radius: 100%; } li:nth-child(1) { -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms; } li:nth-child(2) { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; } li:nth-child(3) { -webkit-animation-delay: 400ms; -moz-animation-delay: 400ms; } li:nth-child(4) { -webkit-animation-delay: 600ms; -moz-animation-delay: 600ms; } li:nth-child(5) { -webkit-animation-delay: 800ms; -moz-animation-delay: 800ms; } li:nth-child(6) { -webkit-animation-delay: 1000ms; -moz-animation-delay: 1000ms; } li:nth-child(7) { -webkit-animation-delay: 1200ms; -moz-animation-delay: 1200ms; } li:nth-child(8) { -webkit-animation-delay: 1400ms; -moz-animation-delay: 1400ms; } li:nth-child(9) { -webkit-animation-delay: 1600ms; -moz-animation-delay: 1600ms; } li:nth-child(10) { -webkit-animation-delay: 1800ms; -moz-animation-delay: 1800ms; } li:nth-child(10):before, li:nth-child(10):after { content: ""; display: block; width: 6px; height: 12px; position: absolute; top: 20px; border-radius: 100%; background: rgba(0,0,0,1); box-shadow: 0px 0px 10px 2px rgba(255,255,255,1); } li:nth-child(10):before { right: 20px; } li:nth-child(10):after { right: 5px; } @-webkit-keyframes rainbow { 0% { background-color: rgba(255,255,0,1); } 30% { background-color: rgba(250,175,255,1); box-shadow: inset 0px 0px 20px rgba(255,255,255,0.7), 0px 0px 20px rgba(255,255,255,0.7); } 60% { background-color: rgba(130,255,255,1); } 100% { background-color: rgba(255,255,0,1); } } @-webkit-keyframes bounce { 50% { -webkit-transform: translateY(60px); } } @-moz-keyframes rainbow { 0% { background-color: rgba(255,255,0,1); } 30% { background-color: rgba(250,175,255,1); box-shadow: inset 0px 0px 20px rgba(255,255,255,0.7), 0px 0px 20px rgba(255,255,255,0.7); } 60% { background-color: rgba(130,255,255,1); } 100% { background-color: rgba(255,255,0,1); } } @-moz-keyframes bounce { 50% { -moz-transform: translateY(-60px); } }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email