코드 초보자 CSS 아트pt.셋

오래간만이에요!새해 복 많이 받으세요.제 목표는 올해 정기적으로 여러분께 더 많은 CSS 예술 강좌와 다른 블로그 글을 보여드리는 것입니다.

2） HTML

<div class="head">
  <div class="l-eye"></div>
  <div class="r-eye"></div>
  <div class="mouth">
    <div class="l-teeth"></div>
    <div class="r-teeth"></div>
  </div>
</div>

3） CSS

.head {
  background-color: yellow;
  width: 500px;
  height: 500px;
  position: relative;
  border-radius: 50%;
  left: 25%;
  top: 80px;
}

.l-eye {
  position: absolute;
  background-color: black;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 100px;
  left: 20%;
}

.r-eye {
  position: absolute;
  background-color: black;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 100px;
  right: 20%;
}

.mouth {
  position: absolute;
  background-color: black;
  width: 200px;
  height: 100px;
  top: 300px;
  left: 30%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.l-teeth {
  position: absolute;
  background-color: white;
  width: 40px;
  height: 30px;
  left: 29%;
}

.r-teeth {
  position: absolute;
  background-color: white;
  width: 40px;
  height: 30px;
  right: 29%;
}

여기 코드와 그림의 실시간 보기

나는 네가 이 어리석은 작은 얼굴을 좋아하길 바란다.나는 한동안 어떤 CSS 예술도 창작하지 않았기 때문에 매우 간단하지만, 나는 그를 좋아한다.다음 사진 몇 장이 더 좋을 거예요!단일 div CSS 이미지를 만들고 싶습니다.자신의 CSS 예술의 자원과 링크를 공유하세요.
저의 이전 댓글에서 CSS 예술의 입문에 관한 자원을 많이 공유했습니다. 어서 오세요!