css8号球,CSS3 8号黑色桌球

CSS

语言：

CSSSCSS

确定

.ball {

display: inline-block;

width: 100%;

height: 100%;

margin: 0;

border-radius: 50%;

position: relative;

background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%);

}

.ball:before {

content: "";

position: absolute;

background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);

border-radius: 50%;

bottom: 2.5%;

left: 5%;

opacity: 0.6;

height: 100%;

width: 90%;

-webkit-filter: blur(5px);

z-index: 2;

}

.ball:after {

width: 100%;

height: 100%;

content: "";

position: absolute;

top: 5%;

left: 10%;

border-radius: 50%;

background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);

-webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);

-moz-transform: translateX(-80px) translateY(-90px) skewX(-20deg);

-ms-transform: translateX(-80px) translateY(-90px) skewX(-20deg);

-o-transform: translateX(-80px) translateY(-90px) skewX(-20deg);

transform: translateX(-80px) translateY(-90px) skewX(-20deg);

-webkit-filter: blur(10px);

}

.ball .eight {

width: 110px;

height: 110px;

margin: 30%;

background: white;

border-radius: 50%;

-webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);

-moz-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);

-ms-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);

-o-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);

transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);

position: absolute;

}

.ball .eight:before {

content: "8";

display: block;

position: absolute;

text-align: center;

height: 80px;

width: 100px;

left: 50px;

margin-left: -40px;

top: 44px;

margin-top: -40px;

color: black;

font-family: Arial;

font-size: 90px;

line-height: 104px;

}

.ball .shadow {

position: absolute;

width: 100%;

height: 100%;

background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);

-webkit-transform: rotateX(90deg) translateZ(-150px);

-moz-transform: rotateX(90deg) translateZ(-150px);

-ms-transform: rotateX(90deg) translateZ(-150px);

-o-transform: rotateX(90deg) translateZ(-150px);

transform: rotateX(90deg) translateZ(-150px);

z-index: -1;

}

.stage {

width: 300px;

height: 300px;

display: inline-block;

margin: 20px;

-webkit-perspective: 1200px;

-moz-perspective: 1200px;

-ms-perspective: 1200px;

-o-perspective: 1200px;

perspective: 1200px;

-webkit-perspective-origin: 50% 50%;

-moz-perspective-origin: 50% 50%;

-ms-perspective-origin: 50% 50%;

-o-perspective-origin: 50% 50%;

perspective-origin: 50% 50%;

}

body {

width: 300px;

margin: 20px auto;

background: linear-gradient(to bottom, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);

background-repeat: no-repeat;

}