html
html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>sphere</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div class="alpha"><div class="sphere"></div>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
background:-webkit-linear-gradient(190deg, orange, black);
}
.sphere{
position:relative;
left:27px;
width:200px;
height:200px;
position:absolute;
border-radius:100px;
opacity:0.3;
/*border:1px solid black;*/
}
.alpha{
position:absolute;
left:40px;
top:100px;
transform-style:preserve-3d;
animation:rotat 15s linear alternate Infinite;
background-color:;
width:250px;
height:250px;
/*transform:rotateX(100deg);*/
}
@keyframes rotat{
10%{
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onload=function(){
var k=Math.ceil(Math.random()*3);
for(var i=0;i<=280;i+=7)
{
Sphere=$("<div>");
Sphere=$(Sphere).addClass("sphere");
Sphere.css({
"transform":"rotateY("+i+"deg)",
"background":"radial-gradient(white,yellow,red)"
});
var arr=["red","yellow","white","red"];
if(i%35==0)
{
Sphere.css({
"border":"1px solid "+arr[k]
}
)
}
$(".alpha").append(Sphere);
}}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run