SVG 및 CSS3를 기반으로 한 귀여운 만화 동물 애니메이션 특수 효과

간단한 튜토리얼

SVG 필터와 CSS3를 기반으로 한 귀여운 동물 애니메이션 특수 효과입니다. 이 특수 효과에서는 HTML 태그와 SVG를 사용하여 동물의 모습을 표현하고 CSS3 애니메이션을 사용하여 동물의 다양한 애니메이션 효과를 만듭니다.

HTML 구조 사용 방법

이 특수 효과는 동물을 만들 때 CSS의 border-radius 속성을 사용합니다. 인라인 SVG 배경 이미지.

두 예제 모두 중첩된 div를 동물의 몸체로 사용합니다. 이러한 요소의 합리적인 조합은 동물의 움직임의 각 부분에 대한 애니메이션 효과를 만드는 데 도움이 됩니다.

<!-- Markup for the fox head -->
<div class="fox-head">
  <div class="fox-face">            
    <div class="fox-ears">
      <div class="fox-ear"></div>
      <div class="fox-ear"></div>
    </div>
    <div class="fox-skull"></div>
    <div class="fox-front"></div>
    <div class="fox-eyes"></div>
    <div class="fox-nose"></div>
  </div>
</div>
 
<!-- Markup for the husky head -->
<div class="husky-head">
  <div class="husky-ear"></div>
  <div class="husky-ear"></div>
  <div class="husky-face">
    <div class="husky-eye"></div>
    <div class="husky-eye"></div>
    <div class="husky-nose"></div>
    <div class="husky-mouth">
      <div class="husky-lips"></div>
      <div class="husky-tongue"></div>
    </div>
  </div>
</div>

허스키의 몸은 대부분 둥글고 타원형이므로 이를 만들려면 많은 테두리 반경 속성을 사용해야 합니다. 예를 들어 뒷다리의 CSS 코드는

.husky-hind-leg {
  // ...
  border-top-left-radius: 35% 100%;
  border-top-right-radius: 40% 100%;
}

입니다. 다른 부분은 border-radius 속성만으로는 만들 수 없으며 허스키의 앞다리와 같이 변환과 결합해야 합니다.

.husky-front-legs > .husky-leg:before {
  transform: skewY(-30deg) skewX(10deg);
  transform-origin: top right;
}

여우 신체 부위 제작을 위해 작가는 Adobe Illustrator를 사용하여 그래픽을 제작한 후 개별 부위를 SVG 그래픽으로 저장했습니다. 마지막으로 Sass-SVG를 사용하여 CSS 스타일로 변환합니다.

.fox-nose:before {
  @include svg((viewBox: (0 0 168 168))) {
    // the nose
    @include svg('path', (
      fill: $color-nose,
      d: 'M83.7,86.7c3.3,0,11.6-3.9,11.6-7.1c0-3.2-9.4-3.2-11.6-3.2c-2.2,0-11.6,0-11.6,3.2   C72.1,82.8,80.4,86.7,83.7,86.7z'
    ));
 
    // the line connecting the nose to the mouth
    @include svg('path', (
      stroke: $color-nose,
      fill: none,
      d: 'M83.7,102.3V86.7'
    ));
 
    // the mouth
    @include svg('path', (
      stroke: $color-nose,
      fill: none,
      d: 'M94.5,104.9c0,0-5.2-2.7-10.8-2.7c-5.6,0-10.8,2.7-10.8,2.7'
    ));
  }
}

위 코드는 인코딩된 인라인 배경 이미지를 생성합니다.

.fox-nose:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg...");
}

허스키:

폭스:

위는 SVG를 기반으로 한 귀여운 만화입니다. 및 CSS3 작은 동물 애니메이션 특수 효과에 대한 내용은 PHP 중국어 웹사이트(www.php.cn)에서 더 많은 관련 내용을 참고하세요!