HTML과 CSS를 이용해서 덜 무서운 유령을 만들어요.

할로윈 정신에 융합(하👻) HTML과 몇 줄의 CSS를 사용해서 이 무섭지 않은 유령!
당신이 가장 좋아하는 IDE를 열거나 CodePen을 계속 사용하세요!
다음은 최종 결과입니다.
브레덴 코야의 만년필 Not-So-Spooky Ghost - Halloween 2020 참조@braydoncoyer
onCodePen.

표식

시작하기 전에, 나는 형상적인 최종 결과와 CSS를 이용하여 필요한 결과를 얻을 수 있는 방식으로 표기를 구성하는 방법을 고려하는 것을 좋아한다.
자세히 생각해 봅시다.

유령은 캡슐 모양의 몸을 가지고 있다

유령은 두 개의 둥근 눈을 가지고 있다

유령은 둥근 보조개 두 개

귀신은 밑에 동그라미가 있어 몸의 밑에 파도 모양의 효과를 낸다

유령 밑에 그림자가 있어 보조 정지 효과

이 항목 중의 모든 항목은 divs로 번역할 수 있고 적당한 클래스 이름을 응용할 수 있다.

<div class="ghost">
      <div class="ghost__eyes"></div>
      <div class="ghost__dimples"></div>
      <div class="ghost__feet">
        <div class="ghost__feet-foot"></div>
        <div class="ghost__feet-foot"></div>
        <div class="ghost__feet-foot"></div>
        <div class="ghost__feet-foot"></div>
      </div>
</div>
<div class="shadow"></div>

현재 우리는 이미 ghost의 구조 (표시) 를 만들어서 디자인을 시작합니다.

유령의 몸

먼저 색 변수를 정의합시다. 본고에서 이 변수를 사용할 것입니다.
참고: SCSS를 사용하지만 일반 CSS 변수를 사용할 수도 있습니다.

$background: #00034b;
$white: #ffffff;
$grey: #dbdbdb;
$pink: #ffbeff;
$shadow: #000232;

이제 우리는 색깔을 정의했으니 유령의 몸을 처리하자.

.ghost {
  // 1
  position: relative;
  width: 150px;
  height: 225px;
  background: $white;
  // 2
  box-shadow: -17px 0px 0px $grey inset, 0 0 50px #5939db;
  // 3 
  border-radius: 100px 100px 0 0;
}

위의 스타일을 고려해 보겠습니다.

이 초기 단계에서도 우리는 미래에 절대적인 포지셔닝 요소가 필요하다고 가정할 수 있기 때문에 유령의 몸을 닻점으로 설정할 수 있다.이것은 우리들에게 앞으로 도움이 될 것이다.

동일한 요소에 여러 개의 장방형 음영을 사용할 수 있다는 것을 아십니까?그래, 이제 알았어!상자 그림자가 두 가지 일을 했다.우선, 그것은 우리 유령 체내의 회색 내부 음영을 주었다(이것이 바로 우리가 그것을 inset로 설정한 이유이다).둘째, 우리는 그것으로 아름다운 주위의 유령에게 빛을 발할 수 있다.

우리는 어떻게 소자 밑부분에 영향을 주지 않는 상황에서 캡슐 모양의 설계를 얻을 수 있습니까?border-radius 속성은 선택할 수 있는 매개 변수를 사용할 수 있기 때문에 요소의 서로 다른 모서리의 반지름을 변경할 수 있습니다.

이러한 스타일을 적용하면 다음과 같은 결과를 얻을 수 있습니다.

눈.

이제 보러 갑시다(하)👀 ) 귀신의 눈.
저는 SCS를 사용하여 스타일 디자인을 하기 때문에 제 스타일을 끼워 넣을 능력이 있습니다.

&__eyes {
    // 1
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    padding: 70px 0 0;
    width: 90px;
    height: 20px;

    // 2
    &:before,
    &:after {
      content: "";
      display: block;
      width: 15px;
      height: 25px;
      background: $background;
      border-radius: 50%;
    }
  }

위 스타일에 대해 다음 사항을 고려해야 합니다.

div를 두 눈의 용기로 사용하기로 했습니다.이것은 내가 이 용기를 귀신 체내에 적당히 놓을 것이라는 것을 의미한다.

실제 눈은?나는 모든 눈을 위해div를 만들지 않고 위조 요소를 사용하고 그것들의 스타일을 적절하게 설정하기로 결정했다.이것은 불필요한 표시를 줄이는 데 도움이 된다.

우리 이제 눈이 생겼어!

보조개

우리는 오목한 흔적에 대해 같은 방법을 취하고 오목한 흔적에 대해 위조원소를 사용한다.

&__dimples {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    padding: 35px 0 0;
    width: 130px;
    height: 20px;

    &:before,
    &:after {
      content: "";
      display: block;
      width: 15px;
      height: 15px;
      background: $pink;
      border-radius: 50%;
    }
  }

발, 발

우리는 지금 약간의 좋은 진전을 얻고 있다.이제 몇 개의 원을 만들고 정확하게 위치를 정함으로써 무거운 그림자의 밑부분을 만듭니다.

&__feet {
    width: 100%;
    // 1
    position: absolute;
    bottom: -13px;
    // 2
    display: flex;
    justify-content: space-between;

    &-foot {
      // 3
      width: 25%;
      height: 26px;
      border-radius: 50%;
      background: $white;

      // 4
      &:last-child {
        background-image: linear-gradient(to right, $white 55%, $grey 45%);
      }
    }
  }

우리가 어떻게 귀신의 몸에 넣었는지 기억나?이것은 그들의 보답이다.우리는 이 발을 유령의 몸 밑에 놓고 싶어서 ghost__eyes 우리의 친구이다.

발은 나란히 있어야 하고flexbox는 이를 실현하는 방법이다.

은 모두 4피트이기 때문에 피트당 주어진 폭의 25%를 차지해야 한다.

마지막으로, 우리는 마지막 발을 목표로 position: relative 원소의 중간 배경색을 position: absolute 에서 linear-gradient() 로 변경합니다.이것은 우리가 귀체에 설치한 내부 음영의 환각을 연장시켰다.

음영

우리 꼬마 귀신이 얼마 안 남았어!음영을 빠르게 디자인하자!
여기는 화려한 곳이 없어서 우리는 색깔, 크기, 위치를 정확하게 응용했다.

.shadow {
  background: $shadow;
  width: 150px;
  height: 40px;
  margin-top: 50px;
  border-radius: 50%;
}

애니메이션

마지막으로 CSS 애니메이션으로 이 녀석을 생활 속으로 데려가자!
우리가 디자인한 귀신 몸을 백업합니다. white 속성을 포함합니다.이제 실제 키프레임 애니메이션을 만듭니다.

.ghost {
  ...
  animation: float 2s infinite
}

다음은 grey라고 불리는 키프레임 애니메이션을 정의합니다.애니메이션의 시작과 끝 (0% 및 100%) 에서 그림자는 초기 시작 위치에 있어야 합니다.애니메이션이 절반(50%)까지 진행될 때, 우리는 시작 위치의 약간 위에 무거운 그림자를 놓으려고 한다.

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

너무 좋아요.유령은 지금 위아래로 떠다니고 무한 반복!
부동 착각을 더욱 설득력 있게 하기 위해 우리는 음영 자체에 또 다른 애니메이션을 응용할 수 있다!animation 특성을 섀도우에 추가하는 스타일입니다.

.shadow {
  ...
  animation: shadow 2s infinite;
}

마지막으로 그림자 요소 배율을 변경하는 키프레임 애니메이션을 정의합니다.

@keyframes shadow {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }
}

결론

우리 갑니다!CSS 예술은 항상 그렇게 재미있다. 그것은 자신에게 도전하고 새로운 것을 배우는 좋은 방법이다.
만약 당신이 이 글을 좋아하고 더 많은 이런 내용을 원한다면, 나의 일부 문장other articles을 읽고, 나의 시사통신을 구독하고, 나를 계속 주목하도록 하세요!
할로윈 잘 보내세요!
브레덴 코야의 만년필 Not-So-Spooky Ghost - Halloween 2020 참조@braydoncoyer
onCodePen.