Hello Droid! CSS로 드로이드 군을 그려 보았다

7355 단어 CSSHTML5
CSS로 안드로이드 캐릭터 '드로이드군' 만들기

목표



다음 이미지에 드로이드 군 만들기


※완성된 코드는 여기 로부터 확인할 수 있습니다.

준비



모든 디렉토리에 다음 파일 만들기
  • droid.html
  • droid.css

    • droid.html의 초기 상태
    <!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドロイド君</title>
<link href="droid.css" rel="stylesheet">
</head>
<body>
  <div class="droid">
    <!-- ドロイド君のパーツをここに追加 -->
  </div>
</body>
</body>
</html>

    droid.css의 초기 상태
    /* ドロイド君 */
.droid {
  margin: 50px;
}

/* 以下に追記していく */

    만들기



    필요한 부품 검토



    크게 나누어 3 파트로 나눌 수 있을 것 같아


    또한 몸은 사지와 부모와 자식 관계를 구축 할 것입니다.

    droid.html로 표현하면 이런 느낌이 든다.
    <!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドロイド君</title>
<link href="css/droid.css" rel="stylesheet">
</head>
<body>
  <div class="droid">
    <div class="droid__head">
      <div class="droid__antenna"></div>
      <div class="droid__eye"></div>
    </div>
    <div class="droid__body">
      <div class="droid__hand"></div>
      <div class="droid__leg"></div>
    </div>
  </div>
</body>
</body>
</html>

    머리 만들기



    우선 머리만 작성

    이것은 반원으로 표현할 수 있을 것 같다. droid.css에 다음 추가
    .droid__head {
  width: 100px;
  height: 50px;
  border-radius: 100px 100px 0 0;
  background: #a0c437;
}

    position의 relative·absolute와 z-index를 사용하여 반원 위에 눈을 돌린다
    .droid__head {
  width: 100px;
  height: 50px;
  border-radius: 100px 100px 0 0;
  background: #a0c437;
  /* 新規追加 */
  position: relative;
  z-index: 0;
}

.droid__eye {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* 疑似属性のbefore, afterを使わなくても良いが、使用するdiv タグの数を減らせる */
.droid__eye::before,
.droid__eye::after {
  top: 25px;
  left: 20px;
  width: 13px;
  height: 13px;
  border-radius: 10px;
  background: #ffffff;
  content: "";
  position: absolute;
}

    파일을 열면 이런 느낌이 든다


    눈처럼 안테나용 클래스도 추가
    .droid__antenna {
  position: relative;
  z-index: 1;
}

.droid__antenna::before,
.droid__antenna::after {
  border: 1px solid #a0c437;
  top: px;
  left: 15px;
  width: 15px;
  background: #a0c437;
  transform: rotate(50deg);
  content: "";
  position: absolute;
}

.droid__antenna::after {
  left: 70px;
  transform: rotate(-50deg);
}

    이것으로 마침내 머리가 생겼습니다.


    머리 밑에 몸 만들기



    다음을 추가
    .droid__body {
  width: 100px;
  height: 100px;
  background: #a0c437;
  border-radius: 0 0 5px 5px / 0 0 5px 5px; /* 体の下の角を少し丸くする */
}



    파일을 열면 ... 응, 머리와 몸이 붙어 버렸다,,.droid__head 에 margin-bottom: 5px; 를 추가하여 조정

    이것으로 좋은 느낌이 들었다.


    팔다리 추가



    머리에 눈이나 안테나를 붙였을 때와 마찬가지로 손발도 붙일 수 있다
    .droid__hand {
  z-index: 1;
  position: relative;
}

.droid__hand::before,
.droid__hand::after {
  left: -25px;
  width: 20px;
  height: 77px;
  background: #a0c437;
  border-radius: 20px/ 20px;
  content: "";
  position: absolute;
}

.droid__hand::after {
  left: 105px;
  border-radius: 20px/ 20px;
}

.droid__leg {
  position: relative;
  z-index: 1;
}

.droid__leg::before,
.droid__leg::after {
  top: 50px;
  left: 10px;
  width: 20px;
  height: 77px;
  background: #a0c437;
  border-radius: 20px/ 20px;
  content: "";
  position: absolute;
}

.droid__leg::after {
  left: 70px;
  border-radius: 20px/ 20px;
}

    완성!


    조금 궁리



    드로이드 군이 깜박이는 것을 시도했다..droid__eye::after 에 animation: blink-r infinite 7s; 추가

    추가 하기 추가
    .droid__eye::before {
  animation: blink-l infinite 7s;
}

@keyframes blink-r {
  0% {
    transform: rotate(180deg) scaleY(1);
  }
  1% {
    transform: rotate(180deg) scaleY(0);
  }
  2% {
    transform: rotate(180deg) scaleY(1);
  }
  50% {
    transform: rotate(180deg) scaleY(1);
  }
  51% {
    transform: rotate(180deg) scaleY(0);
  }
  52% {
    transform: rotate(180deg) scaleY(1);
  }
  53% {
    transform: rotate(180deg) scaleY(1);
  }
  54% {
    transform: rotate(180deg) scaleY(0);
  }
  55% {
    transform: rotate(180deg) scaleY(1);
  }
  100% {
    transform: rotate(90deg) scaleY(1);
  }
}

@keyframes blink-l {
  0% {
    transform: rotate(180deg) scaleY(1);
  }
  1% {
    transform: rotate(180deg) scaleY(0);
  }
  2% {
    transform: rotate(180deg) scaleY(1);
  }
  50% {
    transform: rotate(180deg) scaleY(1);
  }
  51% {
    transform: rotate(180deg) scaleY(0);
  }
  52% {
    transform: rotate(180deg) scaleY(1);
  }
  53% {
    transform: rotate(180deg) scaleY(1);
  }
  54% {
    transform: rotate(180deg) scaleY(0);
  }
  55% {
    transform: rotate(180deg) scaleY(1);
  }
  100% {
    transform: rotate(90deg) scaleY(1);
  }
}

    감상



    재미 있었고 CSS 공부가 되었지만,
    더 이상 복잡한 것을 만들려고 하면 상당한 시간이 녹을 것 같아…

    참고



  • BEM 문서
  • 클래스명은 BEM의 사고방식을 도입했다


  • CSS에서 다양한 형태를 표현해 봅시다.
  • 기본 도형을 작성하는 방법은 이것을 참고로 했다


  • 이미지를 사용하지 않고 HTML과 CSS만으로 고양이를 그린 이야기
  • 드로이드 군의 눈꺼풀은 이것을 참고로 했다

    • DatePicker를 스피너 지정해도 캘린더 부분이 사라지지 않는다 (Tablet 단말 전용?)
    Twitter 카드 설정 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage