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
/**** HUE ROTATION ONLY WORKS IN CHROME AND SAFARI ****/ body { background-color: #CCC; margin:0; padding:0; } .planet { width:200px; height:200px; border-radius:200px; background-size: 400px; background-color:#FFF; margin-left:156px; margin-top:50px; background: url(http://www.sxs-design.com/BVE/ANIM/W1.png); box-shadow: inset 8px 8px 30px rgba(255,255,255,0.6); -webkit-animation: unrotate 10s infinite linear; -moz-animation: unrotate 10s infinite linear; -o-animation: unrotate 10s infinite linear; } div.planet:before { content:""; display:block; width:200px; height:200px; border-radius:200px; background-size: 400px; background-color:#FFF; animation: rotate 10s infinite linear; -webkit-animation: rotate 10s infinite linear; -moz-animation: rotate 10s infinite linear; -o-animation: rotate 10s infinite linear; background: url(http://www.sxs-design.com/BVE/ANIM/W1.png); box-shadow: inset 8px 8px 30px rgba(255,255,255,0.6); } div.planet:after { position: absolute; left:156px; top:40px; content:""; width:200px; height:140px; background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 14%, rgba(255,255,255,0.27) 52%, rgba(255,255,255,0) 53%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(14%,rgba(255,255,255,0)), color-stop(52%,rgba(255,255,255,0.27)), color-stop(53%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 14%,rgba(255,255,255,0.27) 52%,rgba(255,255,255,0) 53%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 14%,rgba(255,255,255,0.27) 52%,rgba(255,255,255,0) 53%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 14%,rgba(255,255,255,0.27) 52%,rgba(255,255,255,0) 53%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255,255,255,0) 14%,rgba(255,255,255,0.27) 52%,rgba(255,255,255,0) 53%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .mine{background: url(http://www.sxs-design.com/BVE/ANIM/W2.png); box-shadow: inset -19px -19px 70px rgba(0,0,0,0.5), inset -5px -5px 18px rgba(0,0,0,0.2);} .shadow { position:absolute; left:166px; top:133px; content:""; width:180px; height:110px; background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 14%, rgba(0,0,0,0.12) 52%, rgba(0,0,0,0) 53%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(14%,rgba(255,255,255,0)), color-stop(52%,rgba(0,0,0,0.12)), color-stop(53%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 14%,rgba(0,0,0,0.12) 52%,rgba(0,0,0,0) 53%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 14%,rgba(0,0,0,0.12) 52%,rgba(0,0,0,0) 53%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 14%,rgba(0,0,0,0.12) 52%,rgba(0,0,0,0) 53%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255,255,255,0) 14%,rgba(0,0,0,0.12) 52%,rgba(0,0,0,0) 53%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } p.shadow:before { position:absolute; left:06px; top:106px; content:""; width:180px; height:30px; background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.25)), color-stop(60%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } @keyframes rotate { from {background-position:0 0; -webkit-filter: hue-rotate(0deg)} to {background-position:400px 0; -webkit-filter: hue-rotate(360deg)} } @-webkit-keyframes rotate { from {background-position:0 0; -webkit-filter: hue-rotate(0deg)} to {background-position:400px 0; -webkit-filter: hue-rotate(360deg)} } @-moz-keyframes rotate { from {background-position:0 0;} to {background-position:400px 0;} } @-o-keyframes rotate { from {background-position:0 0;} to {background-position:400px 0;} } @keyframes unrotate { from {background-position:400px 0; -webkit-filter: hue-rotate(0deg)} to {background-position:0 0; -webkit-filter: hue-rotate(360deg)} } @-webkit-keyframes unrotate { from {background-position:400px 0; -webkit-filter: hue-rotate(0deg)} to {background-position:0 0; -webkit-filter: hue-rotate(360deg)} } @-moz-keyframes unrotate { from {background-position:400px 0;} to {background-position:0 0;} } @-o-keyframes unrotate { from {background-position:400px 0;} to {background-position:0 0;} }
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