效果地址：https://codepen.io/flyingliao/pen/oOLodJ?editors=1100

其它動畫效果地址：1.https://scrimba.com/c/cJ8NPpU2 2.https://scrimba.com/c/cbNkBnuV

HTML code：

<div class="eyes">
  <span></span>
  <span></span>
</div>

CSS code：

html,body{
  margin: 0;
  padding: 0;
}
*{
  /* 設置所有元素的width、height包括其內邊距、邊框、內容 
 
*/
  box-sizing: border-box;
}
body,.eyes{
  height: 100vh;
  border: 1px solid white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
}
.eyes{
  width: 100%;
  height: 100%;
}
/* 畫出眼睛 */
.eyes span{
  position: relative;
  width: 10em;
  height
 
: 5em;
  border-radius: 50%;
  background-color: black;
}
/* 利用span的::before偽元素畫出眼球 */
.eyes span::before{
  content:‘‘;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-color: white;
  /* 定位 */
  position: absolute;
  left: 3.5em;
  top: 1em;
}

6.HTML+CSS制作一雙眼睛