使用 CSS 画小黄脸

2025年06月04日

效果

代码

<div class="face">
  <span class="eye a"></span>
  <span class="eye b"></span>
  <span class="mouth"></span>
</div>
<style>
.face{
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 66%;
  background: #fedf6b;
  border: 5px #222 solid;
  box-shadow: 15px -15px 0 #ffc16d inset;
}

.eye{
  top: 50px;
  right: 30px;
  width: 25px;
  height: 25px;
  position: absolute;
  border-radius: 66%;
  background: #fff;
  border: 5px #222 solid;
}

.eye.b{
  right: 95px;
}

.mouth{
    right: 50px;
    width: 50px;
    height: 40px;
    bottom: 50px;
    position: absolute;
    border-radius: 66%;
    border-bottom: 5px #222 solid;
}
</style>

字符数: 0

单词数: 0

行数: 0

使用 CSS 画小黄脸

效果

代码

关于博主

LBZCC的博主

最新文章

分享文章