<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>HTML5球体斑点运动动画 - 网页模板</title>
<style>
*, *:before, *:after {
box-sizing: border-box;
}
html {
background: #222222;
}
.scene {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(61, 184, 245, 0.85);
perspective: 9999px;
transform-style: preserve-3d;
}
.scene:before,
.scene:after {
position: absolute;
width: 100%;
border-radius: 50%;
content: '';
}
.scene:before {
top: 400px;
height: 50px;
background: rgba(0, 0, 0, 0.25);
}
.scene:after {
top: 0;
height: 100%;
border: 3px solid black;
border-radius: 50%;
box-shadow: -20px -20px 0 rgba(0, 0, 0, 0.25) inset;
transform: translateZ(151px);
}
.sphere {
width: 100%;
height: 100%;
animation: rotate 24s infinite linear;
transform-style: preserve-3d;
}
.ring {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.spoke {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 0;
transform-style: preserve-3d;
}
.sphere #ring1 {
animation: rotateRing1 24s infinite ease-in-out alternate;
}
.sphere #ring2 {
animation: rotateRing2 24s infinite ease-in-out alternate;
}
.sphere #ring3 {
animation: rotateRing3 24s infinite ease-in-out alternate;
}
.sphere #ring4 {
animation: rotateRing4 24s infinite ease-in-out alternate;
}
.sphere #ring5 {
animation: rotateRing5 24s infinite ease-in-out alternate;
}
.sphere #ring6 {
animation: rotateRing6 24s infinite ease-in-out alternate;
}
.sphere #ring7 {
animation: rotateRing7 24s infinite ease-in-out alternate;
}
.sphere #ring8 {
animation: rotateRing8 24s infinite ease-in-out alternate;
}
.sphere #ring9 {
animation: rotateRing9 24s infinite ease-in-out alternate;
}
.sphere #ring10 {
animation: rotateRing10 24s infinite ease-in-out alternate;
}
.sphere #ring11 {
animation: rotateRing11 24s infinite ease-in-out alternate;
}
.sphere #ring12 {
animation: rotateRing12 24s infinite ease-in-out alternate;
}
.sphere #spoke1 {
animation: rotateSpoke1 60s infinite ease-in-out alternate;
}
.sphere #spoke2 {
animation: rotateSpoke2 60s infinite ease-in-out alternate;
}
.sphere #spoke3 {
animation: rotateSpoke3 60s infinite ease-in-out alternate;
}
.sphere #spoke4 {
animation: rotateSpoke4 60s infinite ease-in-out alternate;
}
.sphere #spoke5 {
animation: rotateSpoke5 60s infinite ease-in-out alternate;
}
.sphere #spoke6 {
animation: rotateSpoke6 60s infinite ease-in-out alternate;
}
.sphere #spoke7 {
animation: rotateSpoke7 60s infinite ease-in-out alternate;
}
.sphere #spoke8 {
animation: rotateSpoke8 60s infinite ease-in-out alternate;
}
.sphere #spoke9 {
animation: rotateSpoke9 60s infinite ease-in-out alternate;
}
.sphere #spoke10 {
animation: rotateSpoke10 60s infinite ease-in-out alternate;
}
.sphere #spoke11 {
animation: rotateSpoke11 60s infinite ease-in-out alternate;
}
.sphere #spoke12 {
animation: rotateSpoke12 60s infinite ease-in-out alternate;
}
.spoke:before,
.spoke:after {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fafa9e;
content: '';
transform: rotateY(90deg);
}
.spoke:before {
top: -6px;
right: -6px;
transform: rotateY(90deg);
}
.spoke:after {
top: -6px;
left: -6px;
transform: rotateY(-90deg);
}
@keyframes rotateRing1 {
0% {
transform: rotateX(32.72727deg);
}
20% {
transform: rotateX(30deg);
}
40% {
transform: rotateY(32.72727deg);
}
60% {
transform: rotateY(30deg);
}
80% {
transform: rotateZ(32.72727deg);
}
100% {
transform: rotateZ(30deg);
}
}
@keyframes rotateRing2 {
0% {
transform: rotateX(65.45455deg);
}
20% {
transform: rotateX(60deg);
}
40% {
transform: rotateY(65.45455deg);
}
60% {
transform: rotateY(60deg);
}
80% {
transform: rotateZ(65.45455deg);
}
100% {
transform: rotateZ(60deg);
}
}
@keyframes rotateRing3 {
0% {
transform: rotateX(98.18182deg);
}
20% {
transform: rotateX(90deg);
}
40% {
transform: rotateY(98.18182deg);
}
60% {
transform: rotateY(90deg);
}
80% {
transform: rotateZ(98.18182deg);
}
100% {
transform: rotateZ(90deg);
}
}
@keyframes rotateRing4 {
0% {
transform: rotateX(130.90909deg);
}
20% {
transform: rotateX(120deg);
}
40% {
transform: rotateY(130.90909deg);
}
60% {
transform: rotateY(120deg);
}
80% {
transform: rotateZ(130.90909deg);
}
100% {
transform: rotateZ(120deg);
}
}
@keyframes rotateRing5 {
0% {
transform: rotateX(163.63636deg);
}
20% {
transform: rotateX(150deg);
}
40% {
transform: rotateY(163.63636deg);
}
60% {
transform: rotateY(150deg);
}
80% {
transform: rotateZ(163.63636deg);
}
100% {
transform: rotateZ(150deg);
}
}
@keyframes rotateRing6 {
0% {
transform: rotateX(196.36364deg);
}
20% {
transform: rotateX(180deg);
}
40% {
transform: rotateY(196.36364deg);
}
60% {
transform: rotateY(180deg);
}
80% {
transform: rotateZ(196.36364deg);
}
100% {
transform: rotateZ(180deg);
}
}
@keyframes rotateRing7 {
0% {
transform: rotateX(229.09091deg);
}
20% {
transform: rotateX(210deg);
}
40% {
transform: rotateY(229.09091deg);
}
60% {
transform: rotateY(210deg);
}
80% {
transform: rotateZ(229.09091deg);
}
100% {
transform: rotateZ(210deg);
}
}
@keyframes rotateRing8 {
0% {
transform: rotateX(261.81818deg);
}
20% {
transform: rotateX(240deg);
}
40% {
transform: rotateY(261.81818deg);
}
60% {
transform: rotateY(240deg);
}
80% {
transform: rotateZ(261.81818deg);
}
100% {
transform: rotateZ(240deg);
}
}
@keyframes rotateRing9 {
0% {
transform: rotateX(294.54545deg);
}
20% {
transform: rotateX(270deg);
}
40% {
transform: rotateY(294.54545deg);
}
60% {
transform: rotateY(270deg);
}
80% {
transform: rotateZ(294.54545deg);
}
100% {
transform: rotateZ(270deg);
}
}
@keyframes rotateRing10 {
0% {
transform: rotateX(327.27273deg);
}
20% {
transform: rotateX(300deg);
}
40% {
transform: rotateY(327.27273deg);
}
60% {
transform: rotateY(300deg);
}
80% {
transform: rotateZ(327.27273deg);
}
100% {
transform: rotateZ(300deg);
}
}
@keyframes rotateRing11 {
0% {
transform: rotateX(360deg);
}
20% {
transform: rotateX(330deg);
}
40% {
transform: rotateY(360deg);
}
60% {
transform: rotateY(330deg);
}
80% {
transform: rotateZ(360deg);
}
100% {
transform: rotateZ(330deg);
}
}
@keyframes rotateRing12 {
0% {
transform: rotateX(392.72727deg);
}
20% {
transform: rotateX(360deg);
}
40% {
transform: rotateY(392.72727deg);
}
60% {
transform: rotateY(360deg);
}
80% {
transform: rotateZ(392.72727deg);
}
100% {
transform: rotateZ(360deg);
}
}
@keyframes rotateSpoke1 {
0% {
transform: rotateX(15deg);
}
10% {
transform: rotateY(15deg);
}
20% {
transform: rotateZ(15deg);
}
30% {
transform: rotateX(15deg) rotateY(15deg);
}
40% {
transform: rotateX(15deg) rotateY(15deg) rota