純CSS3制作一個(gè)仿真眼球

本想起一個(gè)嘩眾取寵的標(biāo)題镰烧，但轉(zhuǎn)念一想拢军，還是求真務(wù)實(shí)一點(diǎn)，用內(nèi)容說話怔鳖。今天我們拋開JS茉唉，不用SVG，單純使用CSS來一步一步地制作響應(yīng)式的仿真眼球结执。

先睹為快

最終效果

靜態(tài)眼球模型	浮動(dòng)的眼球

在線預(yù)覽
請(qǐng)戳這里
代碼倉庫
我已將其封裝成vue組件度陆，托管在各倉庫上，有興趣可以看一看献幔。
github
gitee

繪制眼球基礎(chǔ)球體

html

<body>
  <div class="eye_container">
    <div class="eye">
    </div>
  </div>
</body>

body {
  background-image: radial-gradient(ellipse at 50% 0%, #eef 0, #888 100%);
  min-height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.eye_container {
  width: 200px;
  height: 200px;
}

.eye {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: radial-gradient(circle at 45% 45%, #fff 41%, #ccc 83%);
}

通過.eye_container來定義眼球的邊界懂傀，通過它來控制眼球的大小。
通過radial-gradient（徑向漸變）蜡感，由中心點(diǎn)輻射開進(jìn)行顏色漸變蹬蚁，這里選取中心點(diǎn)偏左（45%）處開始漸變恃泪，通過灰色漸變構(gòu)造出立體感。

描繪虹膜基礎(chǔ)輪廓

html

<body>
  <div class="eye_container">
    <div class="eye">
      <div class="eye_iris">
      </div>
    </div>
  </div>
</body>

.eye_iris {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  box-shadow: 0 0 5px 0 #000;
  background: radial-gradient(circle at center, #b86e29 32%, #94c7d4 42%, #1c0a24 112%);
}

通過三種顏色構(gòu)成的徑向漸變構(gòu)造出虹膜的基礎(chǔ)輪廓缚忧，同時(shí)通過box-shadow制作虹膜邊框的模糊特效悟泵。

制作四根睫狀肌

html

<body>
  <div class="eye_container">
    <div class="eye">
      <div class="eye_iris">
        <ul class="eye_ciliary">
          <li class="eye_ciliary_item"><span></span></li>
        </ul>
      </div>
    </div>
  </div>
</body>

.eye_ciliary {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateZ(1deg);
}

.eye_ciliary_item {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  margin-top: -50%;
}

.eye_ciliary_item span {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
}

.eye_ciliary_item:before, 
.eye_ciliary_item:after, 
.eye_ciliary_item span:before, 
.eye_ciliary_item span:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000;
    opacity: 0.1;
}

.eye_ciliary_item:before {
  transform: scale(0.025, 0.7) rotate(45deg);
}

.eye_ciliary_item:after {
  transform: scale(0.7, 0.025) rotate(45deg);
}

.eye_ciliary_item span:before {
  transform: rotate(45deg) scale(0.025, 0.7) rotate(45deg);
}

.eye_ciliary_item span:after {
  transform: rotate(-45deg) scale(0.025, 0.7) rotate(45deg);
}

li的:before、:after偽元素及span的:before闪水、:after偽元素構(gòu)成四個(gè)同虹膜一般大小的正方形糕非。
將這4個(gè)正方形通過變換得到菱形，首先正方形向不同的方向旋轉(zhuǎn)球榆，然后往較長(zhǎng)的一邊拉長(zhǎng)朽肥，另外一邊收縮得到菱形。
根據(jù)勾股定理持钉，我們假設(shè)虹膜的矩形邊長(zhǎng)為1衡招，則可以得到虹膜的直徑為0.7（1/√2=0.707106...），故此處將較長(zhǎng)的邊縮放為原來的0.7倍每强，正好填充滿虹膜直徑始腾。

增加更多的睫狀肌

html

<body>
  <div class="eye_container">
    <div class="eye">
      <div class="eye_iris">
        <ul class="eye_ciliary">
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
        </ul>
      </div>
     </div>
  </div>
</body>

.eye_ciliary_item:nth-child(2) {
  transform: rotateZ(5deg);
}
.eye_ciliary_item:nth-child(3) {
  transform: rotateZ(10deg);
}
.eye_ciliary_item:nth-child(4) {
  transform: rotateZ(15deg);
}
.eye_ciliary_item:nth-child(5) {
  transform: rotateZ(20deg);
}
.eye_ciliary_item:nth-child(6) {
  transform: rotateZ(25deg);
}
.eye_ciliary_item:nth-child(7) {
  transform: rotateZ(30deg);
}
.eye_ciliary_item:nth-child(8) {
  transform: rotateZ(35deg);
}
.eye_ciliary_item:nth-child(9) {
  transform: rotateZ(40deg);
}

我們假設(shè)兩條睫狀肌之間的角度偏差為5度，則一共需要360/5 = 72條睫狀肌空执，而根據(jù)上個(gè)步驟浪箭，一個(gè)li可在四個(gè)象限產(chǎn)生總數(shù)為8條的睫狀肌，因此我們此處構(gòu)造了72/8 = 9個(gè)li辨绊。

繪制瞳孔

html

<body>
  <div class="eye_container">
    <div class="eye">
      <div class="eye_iris">
        <ul class="eye_ciliary">
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
        </ul>
        <ul class="eye_ciliary eye_ciliary_sub">
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
          <li class="eye_ciliary_item"><span></span></li>
        </ul>
      </div>
     </div>
  </div>
</body>

.eye_ciliary_sub {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
}

.eye_ciliary_sub .eye_ciliary_item:before, 
.eye_ciliary_sub .eye_ciliary_item:after, 
.eye_ciliary_sub .eye_ciliary_item span:before, 
.eye_ciliary_sub .eye_ciliary_item span:after {
  opacity: 1;
}

與虹膜的睫狀肌制作一樣來制作瞳孔奶栖，只是通過縮小體積和調(diào)整透明度是的中間部分的顏色更加深暗。

瞳孔增加高光

html

<body>
<div class="eye_container">
  <div class="eye">
    <div class="eye_iris">
      <ul class="eye_ciliary">
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
      </ul>
      <ul class="eye_ciliary eye_ciliary_sub">
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
      </ul>
      <div class="eye_reflect"></div>
      <div class="eye_reflect eye_reflect_sec"></div>
      <div class="eye_reflect eye_reflect_sub"></div>
    </div>
  </div>
</div>
</body>

.eye_reflect {
  position: absolute;
  top: 30%;
  left: 30%;
  width: 20%;
  height: 15%;
  border-radius: 50%;
  transform: rotate(-35deg);
  background-image: radial-gradient(circle at center, #fff 0%, #fff 40%, rgba(255,255,255,0) 100%);
  z-index: 2;
  opacity: .9;
}

.eye_reflect_sec {
  top: 58%;
  left: 50%;
  width: 12%;
  height: 6%;
  background-image: radial-gradient(ellipse at center, #fff 0%, #fff 10%, rgba(255,255,255,0) 100%);
  transform: rotate(35deg);
}

.eye_reflect_sub {
  width: 80%;
  height: 80%;
  top: 0;
  left: 0;
  margin-left: -10%;
  margin-top: -10%;
  background-image: none;
  background-color: rgba(255,255,255, .1);
  z-index: 3;
}

通過兩個(gè)小的橢圓漸變及一個(gè)大的透明的圓形徑向漸變來表現(xiàn)出高光门坷，同時(shí)通過調(diào)整旋轉(zhuǎn)角度將其放置在合適的位置宣鄙。

添加陰影

角膜陰影

.eye_iris {
  top: 15%;
  left: 15%;
  box-shadow: 0 0 5px 2px rgba(0,0,0,0.4), 5px 5px 5px 0 rgba(0,0,0,0.5) inset;
}

這邊增加了角膜內(nèi)陰影，然后通過改變虹膜的位置調(diào)節(jié)眼球的轉(zhuǎn)向使之更靠近光源默蚌，讓角膜陰影顯得更加自然冻晤。

眼球陰影

html

<body>
<div class="eye_container">
  <div class="eye">
    <div class="eye_iris">
      <ul class="eye_ciliary">
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
      </ul>
      <ul class="eye_ciliary eye_ciliary_sub">
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
        <li class="eye_ciliary_item"><span></span></li>
      </ul>
      <div class="eye_reflect"></div>
      <div class="eye_reflect eye_reflect_sec"></div>
      <div class="eye_reflect eye_reflect_sub"></div>
    </div>
  </div>
  <div class="shade"></div>
</div>
</body>

.eye_iris {
  background-image: radial-gradient(circle at center, #b86e29 32%, #94c7d4 42%, #1c0a24 200%);
}  

.eye:before, .eye:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.eye:before {
  opacity: .75;
  mix-blend-mode: color-burn;
  background-image: radial-gradient(circle at 45% 45%, #ffe 30%, #222 67%, #558 80%);
  z-index: 10;
}

.eye:after {
  mix-blend-mode: overlay;
  background-image: radial-gradient(circle at 65% 65%, #000 20%, rgba(0,0,0,0) 40%);
  z-index: 4;
  opacity: 0.5;
}

.shade {
  position: relative;
  width: 130%;
  height: 10%;
  margin: 0 2em;
  border-radius: 80% 60%;
  background-image: radial-gradient(ellipse at center, #000 0%, rgba(0,0,0, 0.6) 30%, rgba(0,0,0, 0) 70%);
  z-index: 1;
}

利用.eye的:befoer和:after偽元素構(gòu)造出球體上的背光陰影
通過.shade制作球體在下方的投影

增加浮動(dòng)效果

.eye_iris {
  -webkit-animation: eye_iris_shade ease-in-out 1.5s infinite;
  animation: eye_iris_shade ease-in-out 1.5s infinite;
}  

.eye:after {
  -webkit-animation: eye_shade ease-in-out 1.5s infinite;
  animation: eye_shade ease-in-out 1.5s infinite;
}

.eye {
  -webkit-animation: float ease-in-out 1.5s infinite;
  animation: float ease-in-out 1.5s infinite;
}
.shade {
  -webkit-animation: shade ease-in-out 1.5s infinite;
  animation: shade ease-in-out 1.5s infinite;
}
@-webkit-keyframes float {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(1em);
    transform: translateY(1em);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(1em);
    transform: translateY(1em);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes shade {
  0% {
    -webkit-transform: translateY(0) translateX(1em);
    transform: translateY(0) translateX(1em);
    opacity: .5;
  }
  50% {
    -webkit-transform: translateY(1em) translateX(-1em) scale(.9);
    transform: translateY(1em) translateX(-1em) scale(.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0) translateX(1em);
    transform: translateY(0) translateX(1em);
    opacity: .5;
  }
}

@keyframes shade {
  0% {
    -webkit-transform: translateY(0) translateX(1em);
    transform: translateY(0) translateX(1em);
    opacity: .5;
  }
  50% {
    -webkit-transform: translateY(1em) translateX(-1em) scale(.9);
    transform: translateY(1em) translateX(-1em) scale(.9);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0) translateX(1em);
    transform: translateY(0) translateX(1em);
    opacity: .5;
  }
}

@-webkit-keyframes eye_shade {
  0% {
    opacity: .2;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: .2;
  }
}

@keyframes eye_shade {
  0% {
    opacity: .2;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: .2;
  }
}

@-webkit-keyframes eye_iris_shade {
  0% {
    -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.4), 5px 5px 5px 0 rgba(0,0,0,0.2) inset;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.4), 5px 5px 5px 0 rgba(0,0,0,0.2) inset;
  }
  50% {
    -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.4), 5px 5px 5px 0 rgba(0,0,0,0.5) inset;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.4), 5px 5px 5px 0 rgba(0,0,0,0.5) inset;
  }
  100% {
    -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.4), 5px 5px 5px 0 rgba(0,0,0,0.2) inset;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.4), 5px 5px 5px 0 rgba(0,0,0,0.2) inset;
  }
}

@keyframes eye_iris_shade {
  0% {
    -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.4), 5px 5px 5px 0 rgba(0,0,0,0.2) inset;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.4), 5px 5px 5px 0 rgba(0,0,0,0.2) inset;
  }
  50% {
    -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.4), 5px 5px 5px 0 rgba(0,0,0,0.5) inset;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.4), 5px 5px 5px 0 rgba(0,0,0,0.5) inset;
  }
  100% {
    -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.4), 5px 5px 5px 0 rgba(0,0,0,0.2) inset;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.4), 5px 5px 5px 0 rgba(0,0,0,0.2) inset;
  }
}

在動(dòng)畫的不同階段調(diào)節(jié)透明度，及陰影位置大小來調(diào)節(jié)陰影的效果绸吸，靠近光源時(shí)鼻弧，透明度變大，沿X軸拉長(zhǎng)惯裕，遠(yuǎn)離光源時(shí)温数，透明度變小，沿著X軸縮短蜻势。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末撑刺，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子握玛，更是在濱河造成了極大的恐慌够傍，老刑警劉巖甫菠，帶你破解...
沈念sama閱讀 219,539評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異冕屯，居然都是意外死亡寂诱，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,594評(píng)論 3贊 396
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門安聘，熙熙樓的掌柜王于貴愁眉苦臉地迎上來痰洒，“玉大人，你說我怎么就攤上這事浴韭∏鹩鳎” “怎么了？”我有些...
開封第一講書人閱讀 165,871評(píng)論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵念颈，是天一觀的道長(zhǎng)泉粉。經(jīng)常有香客問我，道長(zhǎng)榴芳，這世上最難降的妖魔是什么嗡靡？我笑而不...
開封第一講書人閱讀 58,963評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮窟感，結(jié)果婚禮上讨彼，老公的妹妹穿的比我還像新娘。我一直安慰自己肌括，他們只是感情好点骑，可當(dāng)我...
茶點(diǎn)故事閱讀 67,984評(píng)論 6贊 393
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布酣难。她就那樣靜靜地躺著谍夭，像睡著了一般。火紅的嫁衣襯著肌膚如雪憨募。梳的紋絲不亂的頭發(fā)上紧索，一...
開封第一講書人閱讀 51,763評(píng)論 1贊 307
城市分裂傳說
那天，我揣著相機(jī)與錄音菜谣，去河邊找鬼珠漂。笑死，一個(gè)胖子當(dāng)著我的面吹牛尾膊，可吹牛的內(nèi)容都是我干的媳危。我是一名探鬼主播，決...
沈念sama閱讀 40,468評(píng)論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼冈敛，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼待笑！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起抓谴，我...
開封第一講書人閱讀 39,357評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤暮蹂，失蹤者是張志新（化名）和其女友劉穎寞缝，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體仰泻，經(jīng)...
沈念sama閱讀 45,850評(píng)論 1贊 317
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡荆陆，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,002評(píng)論 3贊 338
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了集侯。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片被啼。...
茶點(diǎn)故事閱讀 40,144評(píng)論 1贊 351
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖棠枉，靈堂內(nèi)的尸體忽然破棺而出趟据，到底是詐尸還是另有隱情，我是刑警寧澤术健，帶...
沈念sama閱讀 35,823評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布汹碱，位于F島的核電站，受9級(jí)特大地震影響荞估，放射性物質(zhì)發(fā)生泄漏咳促。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,483評(píng)論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一勘伺、第九天我趴在偏房一處隱蔽的房頂上張望跪腹。院中可真熱鬧，春花似錦飞醉、人聲如沸冲茸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,026評(píng)論 0贊 22
一樁弒父案缅帘，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽轴术。三九已至，卻和暖如春钦无，著一層夾襖步出監(jiān)牢的瞬間逗栽，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,150評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來泰國(guó)打工失暂，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留彼宠，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,415評(píng)論 3贊 373
代替公主和親
正文我出身青樓弟塞，卻偏偏與公主長(zhǎng)得像凭峡，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子决记，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,092評(píng)論 2贊 355