CSS 球体

基本形状

<figure class="circle"></figure>

.circle {  display: block;  background: black;  border-radius: 100%;  height: 300px;  width: 300px;  margin: 0;}

---

径向渐变

<figure class="circle"></figure>

.circle {  display: block;  background: black;  border-radius: 100%;  height: 300px;  width: 300px;  margin: 0;  background: radial-gradient(circle at 100px 100px, #5cabff, #000);}

---

阴影和 3D

<section class="stage">  <figure class="ball"><span class="shadow"></span></figure></section>

.stage {  width: 300px;  height: 300px;  display: inline-block;  margin: 20px;  -webkit-perspective: 1200px;  -webkit-perspective-origin: 50% 50%;}.ball .shadow {  position: absolute;  width: 100%;  height: 100%;  background: -webkit-radial-gradient(50% 50%, circle, 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);  z-index: -1;}

---

多层阴影

<section class="stage">  <figure class="ball"><span class="shadow"></span></figure></section>

.ball {  display: inline-block;  width: 100%;  height: 100%;  margin: 0;  border-radius: 50%;  position: relative;  background: -webkit-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);  );}.ball:before {  content: "";  position: absolute;  top: 1%;  left: 5%;  width: 90%;  height: 90%;  border-radius: 50%;  background: -webkit-radial-gradient(50% 0px, circle, #ffffff, rgba(255, 255, 255, 0) 58%);  -webkit-filter: blur(5px);  z-index: 2;}

---

光照效果

<section class="stage">  <figure class="ball"><span class="shadow"></span></figure></section>

.ball {  display: inline-block;  width: 100%;  height: 100%;  margin: 0;  border-radius: 50%;  position: relative;  background: -webkit-radial-gradient(50% 120%, circle cover, #323232, #0a0a0a 80%, #000000 100%);}.ball:before {  content: "";  position: absolute;  background: -webkit-radial-gradient(50% 120%, circle cover, 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 {  content: "";  width: 100%;  height: 100%;  position: absolute;  top: 5%;  left: 10%;  border-radius: 50%;  background: -webkit-radial-gradient(50% 50%, circle cover, 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);  -webkit-filter: blur(10px);}

---

8 号球效果

<section class="stage">  <figure class="ball">    <span class="shadow"></span>    <span class="eight"></span>  </figure></section>

.ball .eight {  width: 110px;  height: 110px;  margin: 30%;  background: white;  border-radius: 50%;  -webkit-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;}

---

眼球效果

<section class="stage">  <figure class="ball">    <span class="shadow"></span>    <span class="iris"></span>  </figure></section>

.iris {  width: 40%;  height: 40%;  margin: 30%;  border-radius: 50%;  background: -webkit-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);  -webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);  position: absolute;  -webkit-animation: move-eye-skew 5s ease-out infinite;}.iris:before {  content: "";  display: block;  position: absolute;  width: 37.5%;  height: 37.5%;  border-radius: 50%;  top: 31.25%;  left: 31.25%;  background: black;}.iris:after {  content: "";  display: block;  position: absolute;  width: 31.25%;  height: 31.25%;  border-radius: 50%;  top: 18.75%;  left: 18.75%;  background: rgba(255, 255, 255, 0.2);}

---

会动的眼球

@-webkit-keyframes move-eye-skew {  0% {    -webkit-transform: none;  }  20% {    -webkit-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);  }  25%, 44% {    -webkit-transform: none;  }  50%, 60% {    -webkit-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);  }  66%, 100% {    -webkit-transform: none;  }}