A rotating "Glass like " globe with a Hue changing effect (Works on Chrome and Safari only)
A Pen by Hasan Yousef on CodePen.
A rotating "Glass like " globe with a Hue changing effect (Works on Chrome and Safari only)
A Pen by Hasan Yousef on CodePen.
<div class="planet mine left"><p class="shadow"></p></div> |
/**** 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;} | |
} |