返回

会咬人的布老虎玩具—CSS+JavaScript 实现

前端

春节将至，返乡之旅已悄然开启。往昔，孩提时代的新年是无忧无虑的，父母会采购各种新奇好玩的玩具与我们把玩，布老虎便是那时候最奇特的年货之一。本期，就用纯前端的CSS+JavaScript来复刻这只承载着满满童年回忆的丑萌布老虎。

布老虎的由来

源于中国传统民俗文化的布老虎，已有长达数百的历史。相传古时东北地区常有伤寒肆虐，无药可医，久而久之当地人便用碎布料拼凑缝制出老虎玩偶，祈求老虎的神威以驱除病痛。

随着时代变迁，布老虎早已褪去了其原始的祈福用处，演变为一种寄托美好寓意的吉祥玩具。从宫廷到民间，再到寻常百姓家，布老虎凭借着其独特的造型和饱含的民俗情怀广受人们的喜爱。

春节临近，用现代前端编程重现这只承载传统年俗文化的经典玩具，不失为一种薪火相传的另类传承。

成品展示

是不是很可爱呢？下面就来一步步拆解如何用CSS+JavaScript还原这只萌虎吧！

布局搭建

首先，我们先用一个div搭建出布老虎的基本外形。

<div class="container">
  <div class="body"></div>
  <div class="head">
    <div class="ears"></div>
    <div class="face">
      <div class="eyes"></div>
      <div class="nose"></div>
      <div class="month"></div>
    </div>
  </div>
  <div class="claws"></div>
  <div class="tail"></div>
</div>

布老虎的外形是一个胖墩墩的身体，加上一个圆圆的头，再配上四肢和尾巴。

接着，我们用CSS来修饰下这只小老虎的细节。

.container {
  width: 300px;
  height: 300px;
  position: relative;
  background-color: #e69a70;
  border-style: dashed;
  border-color: black;
  border-width: 1px;
}

.body {
  width: 100%;
  height: 80%;
  border-top-left-corner: 100px 50px;
  border-top-right-corner: 100px 50px;
  border-bottom-left-corner: 80px 100px;
  border-bottom-right-corner: 80px 100px;
}

.head {
  width: 80px;
  height: 80px;
  background-color: #ffb08d;
  border-style: dashed;
  border-width: 1px;
  border-color: black;
  border-top-corner: 50px;
  position: absolute;
  top: 100px;
  left: 60px;
}

.ears {
  width: 40px;
  height: 40px;
  background-color: #e69a70;
  border-style: dashed;
  border-width: 1px;
  border-color: black;
  border-top-corner: 20px;
  border-bottom-corner: 20px;
  position: absolute;
  top: 30px;
  left: 10px;
  left: calc(50% - 20px);
}

.face {
  width: 100%;
  height: 100%;
  background-color: #ff844b;
  border-style: dashed;
  border-width: 1px;
  border-color: black;
  border-bottom-corner: 20px;
}

.eyes {
  width: 10px;
  height: 10px;
  background-color: #000;
  border-style: dashed;
  border-width: 1px;
  border-color: black;
  border-corner: 5px;
  position: absolute;
  top: 20px;
  left: calc(50% - 5px);
}

.eyes::before,
.eyes::after {
  content: "";
  width: 5px;
  height: 5px;
  background-color: #000;
  border-style: dashed;
  border-width: 1px;
  border-color: black;
  border-corner: 2.5px;
  position: absolute;
}

.eyes::before {
  top: 0;
  left: -2.5px;
}

.eyes::after {
  top: 0;
  left: 7.5px;
}

.nose {
  width: 5px;
  height: 5px;
  background-color: #c0392b;
  border-style: dashed;
  border-width: 1px;
  border-color: black;
  border-corner: 2.5px;
  position: absolute;
  top: 40px;
  left: calc(50% - 2.5px);
}

.month {
  width: 20px;
  height: 10px;
  background-color: #e05d44;
  border-style: dashed;
  border-width: 1px;
  border-color: black;
  border-bottom-corner: 10px;
  position: absolute;
  top: 50px;
  left: calc(50% - 10px);
}

.claws {
  width: 20px;
  height: 20px;
  background-color: #e69a70;
  border-style: dashed;
  border-width: 1px;
  border-color: black;
  border-corner: 10px;
  position: absolute;
  top: 180px;
  left: calc(25% - 10px);
}

.claws::before,
.claws::after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #e69a70;
  border-style: dashed;
  border-width: 1px;
  border-color: black;
  border-corner: 5px;
  position: absolute;
}

.claws::before {
  top: 0;
  left: -5px;
}

.claws::after {
  top: 0;
  left: 15px;
}

.tail {
  width: 20px;
  height: 80px;
  background-color: #e69a70;
  border-style: dashed;
  border-width: 1px;
  border-color: black;
  border-corner: 10px;
  position: absolute;
  top: 180px;
  left: calc(75% - 10px);
}

是不是已经初具布老虎的雏形了呢？

交互行为

有了布老虎的基本外形后，我们再来给它加上点睛之笔——咬合动作。

.active .month {
  transform: rotateZ(-20deg) translateY(-10px);
}

const $month = document.getElementByClassName('month');
$month.addEventListenter('click', () => {
  $month.toggleClass('active');
})

完善细节

布老虎的咬合动作已经有了，但总让觉着缺了点神态，我们再来给它加上点小表情。

.active .eyes::before,
.active .eyes::after {
  transform: rotate(-45deg) translateY(-5px);