6.HTML+CSS制作一双眼睛

6.HTML+CSS制作一双眼睛

效果地址：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;
}

 

posted on 2019-04-06 10:48  人生与戏 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/FlyingLiao/p/10661065.html