멋쟁이사자처럼FE 2기/일일과제

22.04.07_<천하제일 캐릭터 경진대회>_초안

(범) 2022. 4. 7. 18:26

참가번호 1번. 토순이

HTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="licat">
      <div class="hat">
        <div class="hatTop"></div>
        <div class="ribbon"></div>
      </div>
      <div class="ear left">
        <div class="earline left"></div>
      </div>
      <div class="ear right">
        <div class="earline right"></div>
      </div>
      <div class="face">
        <div class="eye left">
          <div class="eyecircle left"></div>
        </div>
        <div class="eye right">
          <div class="eyecircle right"></div>
        </div>
        <div class="nose"></div>
        <div class="cheak left"></div>
        <div class="cheak right"></div>
        <div class="mouthbottom"></div>
      </div>
    </div>
  </body>
</html>

 

CSS

/* animaion */
@keyframes 귀오른쪽 {
  from {
    transform: rotate(30deg);
  }
  to {
    transform: rotate(40deg) translate(10px);
  }
}
@keyframes 귀왼쪽 {
  from {
    transform: rotate(-30deg);
  }
  to {
    transform: rotate(-40deg) translate(-10px);
  }
}
/* setting */
:root {
  --pri: #ce705f;
  --sec: ivory;
}
/* reset */
body {
  margin: 0;
  padding: 0;
}
/* layout */
/* design */
*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  background: MistyRose;
}

.hat {
  position: absolute;
  width: 200px;
  height: 50px;
  background-color: sandybrown;
  top: 70px;
  right: 80px;
  border: 10px solid #000;
  border-radius: 50% 50% 50% 50%;
  transform: rotate(10deg);
  z-index: 10;
}
.hatTop {
  position: absolute;
  width: 100px;
  height: 80px;
  background-color: sandybrown;
  top: -80px;
  right: 35px;
  border: 10px solid #000;
  border-radius: 50% 50% 10% 10%;
  transform: rotate(5deg);
  z-index: 100;
}

.ribbon {
  position: absolute;
  width: 100px;
  height: 40px;
  background-color: orangered;
  top: -15px;
  right: 39px;
  border: 10px solid #000;
  border-radius: 10% 10% 40% 40%;
  transform: rotate(5deg);
  z-index: 100;
}
.licat {
  position: relative;
  top: 100px;
  margin: 50px auto;
  width: 400px;
  height: 380px;
}

.licat .ear {
  position: absolute;
  top: 0;
  width: 100px;
  height: 280px;
  border: 10px solid #000;
  border-radius: 50%;
  background-color: var(--sec);
}

.licat .ear.left {
  top: -70px;
  left: 65px;
  transform: rotate(-30deg);
  border-radius: 70% 50% 0 0;
  box-shadow: 0 0 20px rgb(0, 0, 0, 0.5);
  animation: 귀왼쪽 1s infinite alternate;
  animation-delay: 1s;
}

.licat .earline.left {
  position: absolute;
  top: 40px;
  left: 20px;
  width: 40px;
  height: 120px;
  background-color: salmon;
  border: 10px solid #000;
  border-radius: 30%;
  transform: rotate(182deg);
  border-radius: 0 0 60% 60%;
}

.licat .ear.right {
  top: -70px;
  right: 65px;
  transform: rotate(30deg);
  border-radius: 50% 70% 0 0;
  box-shadow: 0 0 20px rgb(0, 0, 0, 0.5);
  animation: 귀오른쪽 1s infinite alternate;
  animation-delay: 1s;
}

.licat .earline.right {
  position: absolute;
  top: 40px;
  left: 20px;
  width: 40px;
  height: 120px;
  background-color: salmon;
  border: 10px solid #000;
  border-radius: 30%;
  transform: rotate(178deg);
  border-radius: 0 0 60% 60%;
}

.licat .face {
  position: absolute;
  width: 400px;
  height: 310px;
  bottom: 0px;
  background-color: var(--sec);
  border: 10px solid black;
  border-radius: 120%;
}

.licat .eye {
  position: absolute;
  top: 100px;
  width: 70px;
  height: 70px;
  border: 10px solid #000;
  border-radius: 50%;
  background-color: white;
}

.eye.left {
  left: 100px;
}

.eye.right {
  right: 100px;
}

.licat .eyecircle {
  position: absolute;
  top: 0px;
  width: 30px;
  height: 30px;
  border: 10px solid #000;
  border-radius: 50%;
  background-color: #000;
}

.nose {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 10px solid #000;
  border-radius: 30% 30% 50% 50%;
  top: 150px;
  left: 175px;
  background-color: pink;
}

.cheak {
  position: absolute;
  width: 100px;
  height: 40px;
  border: 10px solid #000;
  border-radius: 50%;
  top: 180px;
  background-color: salmon;
}

.cheak.left {
  left: 30px;
}

.cheak.right {
  right: 30px;
}

.mouthbottom {
  position: absolute;
  width: 60px;
  height: 80px;
  border: 10px solid #000;
  border-radius: 50%;
  top: 175px;
  left: 160px;
  background-color: orangered;
}

.shirt {
  position: absolute;
  width: 200px;
  top: 500px;
  right: 380px;
  z-index: -100;
}

'멋쟁이사자처럼FE 2기 > 일일과제' 카테고리의 다른 글

로그인화면  (2) 2022.04.13
22.04.07_CSS 중앙정렬 뿌시기!  (6) 2022.04.08
22.04.07_overflow : hidden vs display:none 차이  (0) 2022.04.07
22.04.06_css 문제풀이 과제  (4) 2022.04.06
22.04.05_문제풀이 과제  (0) 2022.04.05

'멋쟁이사자처럼FE 2기/일일과제'의 다른글

  • 현재글22.04.07_<천하제일 캐릭터 경진대회>_초안

관련글

티스토리툴바