Recommendation
More Effects...
JS
1
 
 
CSS
1
/**** HUE ROTATION ONLY WORKS IN CHROME AND SAFARI ****/
2
 
3
body {
4
    background-color: #CCC;
5
  margin:0; padding:0;
6
7
}
8
 
9
 
10
.planet {
11
    width:200px;
12
    height:200px;
13
    border-radius:200px;
14
    background-size: 400px;
15
    background-color:#FFF;
16
    margin-left:156px;
17
    margin-top:50px;
18
    background: url(http://www.sxs-design.com/BVE/ANIM/W1.png);
19
    box-shadow: inset 8px 8px 30px rgba(255,255,255,0.6);
20
    -webkit-animation: unrotate 10s infinite linear;
21
    -moz-animation: unrotate 10s infinite linear;
22
    -o-animation: unrotate 10s infinite linear;
23
}
24
 
25
div.planet:before {
26
    content:"";
27
display:block;
28
    width:200px;
29
    height:200px;
30
    border-radius:200px;
31
    background-size: 400px;
32
    background-color:#FFF;
33
    animation: rotate 10s infinite linear;
34
    -webkit-animation: rotate 10s infinite linear;
35
    -moz-animation: rotate 10s infinite linear;
36
    -o-animation: rotate 10s infinite linear;
37
    background: url(http://www.sxs-design.com/BVE/ANIM/W1.png);
38
box-shadow: inset 8px 8px 30px rgba(255,255,255,0.6);
39
}
40
 
41
div.planet:after {
42
    position: absolute;
43
    left:156px;
44
    top:40px;
45
    content:"";
46
    width:200px;
47
    height:140px;
48
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+ */
49
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+ */
50
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+ */
51
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+ */
52
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+ */
53
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 */
54
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
55
 
56
 
57
}
58
 
59
 
60
 
61
 
62
 
63
.mine{background: url(http://www.sxs-design.com/BVE/ANIM/W2.png);
64
box-shadow:
65
                inset -19px -19px 70px rgba(0,0,0,0.5),
66
                inset -5px -5px 18px rgba(0,0,0,0.2);}
67
68
.shadow {
69
        position:absolute;
70
    left:166px;
71
    top:133px;
72
    content:"";
73
    width:180px;
74
    height:110px;
75
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+ */
76
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+ */
77
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+ */
78
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+ */
79
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+ */
80
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 */
81
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
82
 
83
}
84
p.shadow:before {
85
        position:absolute;
86
    left:06px;
87
    top:106px;
88
    content:"";
89
    width:180px;
90
    height:30px;
91
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+ */
92
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+ */
93
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+ */
94
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+ */
95
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+ */
96
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 */
97
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
98
 
99
 
100
}
101
 
102
 
103
 
104
 
105
@keyframes rotate {
106
  from {background-position:0 0;
107
  -webkit-filter: hue-rotate(0deg)}
108
  to {background-position:400px 0;
109
  -webkit-filter: hue-rotate(360deg)}
110
}
111
@-webkit-keyframes rotate {
112
  from {background-position:0 0;
113
  -webkit-filter: hue-rotate(0deg)}
114
  to {background-position:400px 0;
115
  -webkit-filter: hue-rotate(360deg)}
116
}
117
@-moz-keyframes rotate {
118
  from {background-position:0 0;}
119
  to {background-position:400px 0;}
120
}
121
@-o-keyframes rotate {
122
  from {background-position:0 0;}
123
  to {background-position:400px 0;}
124
}
125
@keyframes unrotate {
126
  from {background-position:400px 0;
127
    -webkit-filter: hue-rotate(0deg)}
128
  to {background-position:0 0;
129
    -webkit-filter: hue-rotate(360deg)}
130
}
131
@-webkit-keyframes unrotate {
132
  from {background-position:400px 0;
133
    -webkit-filter: hue-rotate(0deg)}
134
  to {background-position:0 0;
135
    -webkit-filter: hue-rotate(360deg)}
136
}
137
@-moz-keyframes unrotate {
138
  from {background-position:400px 0;}
139
  to {background-position:0 0;}
140
}
141
@-o-keyframes unrotate {
142
  from {background-position:400px 0;}
143
  to {background-position:0 0;}
144
}
145
 
 
HTML
1
<div class="planet mine left"><p class="shadow"></p></div>
 

Join Effecthub.com

Working with Global Gaming Artists and Developers!


Or Sign Up with Your Email Address:
This field must contain a valid email
Password should be at least 1 character