html div 球形,CSS3 简单的球形构造

CSS

语言：

CSSSCSS

确定

*, *:before, *:after {

margin: 0;

padding: 0;

-moz-box-sizing: border-box;

box-sizing: border-box; }

*:before, *:after {

content: ""; }

html, body {

height: 100%; }

body {

position: relative;

overflow: hidden;

background: #272727; }

.sphere {

-ms-transform: rotateY(-45deg);

-webkit-transform: rotateY(-45deg);

transform: rotateY(-45deg); }

.sphere, .sphere *, .sphere *:before, .sphere *:after {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d; }

.ring {

width: 20em;

height: 20em;

border-radius: 50%;

background: #f7f7f7; }

.ring:nth-child(1) {

-ms-transform: translateZ(-10em) scale(0);

-webkit-transform: translateZ(-10em) scale(0);

transform: translateZ(-10em) scale(0);

-webkit-animation: ring 2s 0s linear infinite;

animation: ring 2s 0s linear infinite; }

.ring:nth-child(2) {

-ms-transform: translateZ(-9.80785em) scale(0.19509);

-webkit-transform: translateZ(-9.80785em) scale(0.19509);

transform: translateZ(-9.80785em) scale(0.19509);

-webkit-animation: ring 2s -0.125s linear infinite;

animation: ring 2s -0.125s linear infinite; }

.ring:nth-child(3) {

-ms-transform: translateZ(-9.2388em) scale(0.38268);

-webkit-transform: translateZ(-9.2388em) scale(0.38268);

transform: translateZ(-9.2388em) scale(0.38268);

-webkit-animation: ring 2s -0.25s linear infinite;

animation: ring 2s -0.25s linear infinite; }

.ring:nth-child(4) {

-ms-transform: translateZ(-8.3147em) scale(0.55557);

-webkit-transform: translateZ(-8.3147em) scale(0.55557);

transform: translateZ(-8.3147em) scale(0.55557);

-webkit-animation: ring 2s -0.375s linear infinite;

animation: ring 2s -0.375s linear infinite; }

.ring:nth-child(5) {

-ms-transform: translateZ(-7.07107em) scale(0.70711);

-webkit-transform: translateZ(-7.07107em) scale(0.70711);

transform: translateZ(-7.07107em) scale(0.70711);

-webkit-animation: ring 2s -0.5s linear infinite;

animation: ring 2s -0.5s linear infinite; }

.ring:nth-child(6) {

-ms-transform: translateZ(-5.5557em) scale(0.83147);

-webkit-transform: translateZ(-5.5557em) scale(0.83147);

transform: translateZ(-5.5557em) scale(0.83147);

-webkit-animation: ring 2s -0.625s linear infinite;

animation: ring 2s -0.625s linear infinite; }

.ring:nth-child(7) {

-ms-transform: translateZ(-3.82683em) scale(0.92388);

-webkit-transform: translateZ(-3.82683em) scale(0.92388);

transform: translateZ(-3.82683em) scale(0.92388);

-webkit-animation: ring 2s -0.75s linear infinite;

animation: ring 2s -0.75s linear infinite; }

.ring:nth-child(8) {

-ms-transform: translateZ(-1.9509em) scale(0.98079);

-webkit-transform: translateZ(-1.9509em) scale(0.98079);

transform: translateZ(-1.9509em) scale(0.98079);

-webkit-animation: ring 2s -0.875s linear infinite;

animation: ring 2s -0.875s linear infinite; }

.ring:nth-child(9) {

-ms-transform: translateZ(0em) scale(1);

-webkit-transform: translateZ(0em) scale(1);

transform: translateZ(0em) scale(1);

-webkit-animation: ring 2s -1s linear infinite;

animation: ring 2s -1s linear infinite; }

.ring:nth-child(10) {

-ms-transform: translateZ(1.9509em) scale(0.98079);

-webkit-transform: translateZ(1.9509em) scale(0.98079);

transform: translateZ(1.9509em) scale(0.98079);

-webkit-animation: ring 2s -1.125s linear infinite;

animation: ring 2s -1.125s linear infinite; }

.ring:nth-child(11) {

-ms-transform: translateZ(3.82683em) scale(0.92388);

-webkit-transform: translateZ(3.82683em) scale(0.92388);

transform: translateZ(3.82683em) scale(0.92388);

-webkit-animation: ring 2s -1.25s linear infinite;

animation: ring 2s -1.25s linear infinite; }

.ring:nth-child(12) {

-ms-transform: translateZ(5.5557em) scale(0.83147);

-webkit-transform: translateZ(5.5557em) scale(0.83147);

transform: translateZ(5.5557em) scale(0.83147);

-webkit-animation: ring 2s -1.375s linear infinite;

animation: ring 2s -1.375s linear infinite; }

.ring:nth-child(13) {

-ms-transform: translateZ(7.07107em) scale(0.70711);

-webkit-transform: translateZ(7.07107em) scale(0.70711);

transform: translateZ(7.07107em) scale(0.70711);

-webkit-animation: ring 2s -1.5s linear infinite;

animation: ring 2s -1.5s linear infinite; }

.ring:nth-child(14) {

-ms-transform: translateZ(8.3147em) scale(0.55557);

-webkit-transform: translateZ(8.3147em) scale(0.55557);

transform: translateZ(8.3147em) scale(0.55557);

-webkit-animation: ring 2s -1.625s linear infinite;

animation: ring 2s -1.625s linear infinite; }

.ring:nth-child(15) {

-ms-transform: translateZ(9.2388em) scale(0.38268);

-webkit-transform: translateZ(9.2388em) scale(0.38268);

transform: translateZ(9.2388em) scale(0.38268);

-webkit-animation: ring 2s -1.75s linear infinite;

animation: ring 2s -1.75s linear infinite; }

.ring:nth-child(16) {

-ms-transform: translateZ(9.80785em) scale(0.19509);

-webkit-transform: translateZ(9.80785em) scale(0.19509);

transform: translateZ(9.80785em) scale(0.19509);

-webkit-animation: ring 2s -1.875s linear infinite;

animation: ring 2s -1.875s linear infinite; }

@-webkit-keyframes ring {

100% {

background: #272727; } }

@keyframes ring {

100% {

background: #272727; } }